場景：ajaxSubmit,json,struts2,提醒保存“json返回值”

ajaxSubmit,json,struts2,提示保存“json返回值”

問題回顧：

1.需求：jsp頁面通過上傳圖片，后臺對應action對圖片做一些壓縮，描邊等處理后，將處理完的image返回到頁面顯示出來。

2.解決方案：采用ajaxSubmit提交，通過返回的json數據，將image填充到對應的

中

>>>>>>>>>>想看最終結果的直接下跳看標題5<<<<<<<<<<<<<<

遇到的幾個問題：

假設

1.傻瓜式的認為，通過普通的ajax提交就能做到(代碼如下)

$.ajax({

url:xxxx,

data:'upImage='+ $('#upImage').val(),

....

success:function(returnData){....}

})

錯誤點：后臺得到的只是String值，并不是通過form序列化的File

2.將form 序列化以后 進行上傳

$.ajax({

url:xxxx,

[color=red]data:$('#form1').formSerialize(),[/color]

....

success:function(returnData){....}

})

結果：不成功，打印了一下$('#form1').formSerialize()，發現里面沒有對upImage數據，這個原因不明，希望看到這個的大神們給個解釋，3Q

3.通過ajaxSubmit上傳______第一步

需要的js

jquery.js

jquery.form.js

<1> js代碼

$("#form1").ajaxSubmit( {

url : "previewImageDeal",

datatype : "json",

success : function(returnData){

...

},

error:function(){

alert('error');

}

});

<2>struts.xml代碼

dealStatus,dealMsg,dImgPath

<3>java 代碼

String dealStatus = null;

String dealMsg = null;

String dImgPath = null;

//圖片處理

//給必要的變量賦值

js中的ajax方法，直接進的error.......無語

4.通過ajaxSubmit上傳______第二步

參考網上的一些資料，在3的基礎上將js中dataType:'json'去掉。strust.xml返回值類型仍然是json即

>>>成功進了 success方法

隨后在success中打印了返回的結果 新的問題出現了

4.1 問題：success(retrunData)的returnData被一對

標簽包住了

應對方法 ：tong過js的replace方法將

去掉 得到的數據是期望的json格式；進一步的通過 var jasonData = eval('('+returnData+')'); ；然后業務邏輯處理

>>>在firfox下調試成功

轉戰ie.chrmo，新的問題又出現了

4.2 問題：在IE、Chrmo中都提示 是否下載“XXXXXXXXXXX” ，打開一看，是返回的json數據，我表示很無語

應對方法：上網查各種資料 。。。。。。。。沒有一個完全匹配遇到的這個問題，但是，通????? 過網上的討論可以定位問題所在

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

之所以會出現下載，是因為struts中對json的理解是 application/json ,而ajaxSubmit是提交的表單(雖然只需要對表單中的file處理)，對應的action對表單數據處理之后通過struts.xml的重定向，導致了提示“下載json”

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

5.通過ajaxSubmit上傳______第三步

吐血應對方法，參考了網上各家資料,最后終于跑通了，中間的曲解就不記錄了，只記錄一下對的東西，寫到這里我想起了一句話，“遇到問題的時候是求助于前輩們，還是自己查資料解決”，此時我感覺自己查資料印象更深刻，所以希望看到的朋友們，遇到問題的時候千萬不要不假思索的就去問別人，找人幫忙寫代碼，解決問題的過程能讓自己對一些東西有更深層次的理解，這個在求助于別人的時候是得不到。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

5.1 java中關鍵代碼

private JSONObject returnData = null;

//這個到底有沒有用，還不知道，有點疲勞，不想做實驗了

response.setContentType("text/xml;charset=utf-8");

//將返回結果保存到map中，然后轉成json

Map map = new HashMap();

map.put();

map.put();

map.put();

returnData = JSONObject.fromObject(map);//轉JSON

response.getWriter().print(returnData );//打印

5.2 xml關鍵部分

text/html

returnData

5.3 js關鍵部分

[color=red]說明：java中通過print打印了想要的json結果，struts.xml中又通過includeProperties強行收留了returnData,所以在js的success方法中會看到兩個json結果塊。為什么要includeProperties呢，因為不加includeProperties標簽或者加空標簽()會得到一大大大大堆不想要的結果，看著就煩，而且還消耗系統和網絡資源[/color]

$("#form1").ajaxSubmit( {

url : "action名字",

//datatype : "json",//徹底注釋掉

success : function(returnData){

returnData = returnData.substring(0,returnData.indexOf('}')+1);//只要print的json結果

var isWindow = false;

//window系統路徑是"\" 要進行轉換 linux不需要轉換

if(returnData.indexOf('\\\\') >= 0){

isWindow = true;

//將路徑中的"\"替換，不然parseJSON會出錯

returnData = returnData.replace(/\\\\/g,'_');

}

var jsonData = jQuery.parseJSON(returnData);

if(jsonData.dealStatus == '0'){

//錯誤處理

alert(jsonData.dealMsg);

$('#upImage').val('');

$('#previewTR').css({"height":"0px"});

$('#previewDiv').html('');

}else{

//成功處理圖片

var tempImagPath = jsonData.previewImagePath ;

var finalImagePath = jsonData.finalImagePath ;

if(isWindow){//window系統將"_"再轉換成"/"

tempImagPath = tempImagPath.replace(/_/g,'/');

finalImagePath = finalImagePath.replace(/_/g,'\\');

}

$('#finalImagePath').val(finalImagePath);

$('#previewTR').css({"height":jsonData.previewHeight+'px'});

$('#previewDiv').html('' );

}

}

});

總結

以上是生活随笔為你收集整理的ajax提交form返回数据格式,ajaxSubmit 返回值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。