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

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

問題回顧：

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

2.解決方案：采用ajaxSubmit提交，通過返回的json數(shù)據(jù)，將image填充到對應(yīng)的

中

>>>>>>>>>>想看最終結(jié)果的直接下跳看標(biāo)題5<<<<<<<<<<<<<<

遇到的幾個問題：

假設(shè)

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

$.ajax({

url:xxxx,

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

....

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

})

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

2.將form 序列化以后 進(jìn)行上傳

$.ajax({

url:xxxx,

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

....

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

})

結(jié)果：不成功，打印了一下$('#form1').formSerialize()，發(fā)現(xiàn)里面沒有對upImage數(shù)據(jù)，這個原因不明，希望看到這個的大神們給個解釋，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方法，直接進(jìn)的error.......無語

4.通過ajaxSubmit上傳______第二步

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

>>>成功進(jìn)了 success方法

隨后在success中打印了返回的結(jié)果 新的問題出現(xiàn)了

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

標(biāo)簽包住了

應(yīng)對方法 ：tong過js的replace方法將

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

>>>在firfox下調(diào)試成功

轉(zhuǎn)戰(zhàn)ie.chrmo，新的問題又出現(xiàn)了

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

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

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

之所以會出現(xiàn)下載，是因?yàn)閟truts中對json的理解是 application/json ,而ajaxSubmit是提交的表單(雖然只需要對表單中的file處理)，對應(yīng)的action對表單數(shù)據(jù)處理之后通過struts.xml的重定向，導(dǎo)致了提示“下載json”

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

5.通過ajaxSubmit上傳______第三步

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

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

5.1 java中關(guān)鍵代碼

private JSONObject returnData = null;

//這個到底有沒有用，還不知道，有點(diǎn)疲勞，不想做實(shí)驗(yàn)了

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

//將返回結(jié)果保存到map中，然后轉(zhuǎn)成json

Map map = new HashMap();

map.put();

map.put();

map.put();

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

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

5.2 xml關(guān)鍵部分

text/html

returnData

5.3 js關(guān)鍵部分

[color=red]說明：java中通過print打印了想要的json結(jié)果，struts.xml中又通過includeProperties強(qiáng)行收留了returnData,所以在js的success方法中會看到兩個json結(jié)果塊。為什么要includeProperties呢，因?yàn)椴患觟ncludeProperties標(biāo)簽或者加空標(biāo)簽()會得到一大大大大堆不想要的結(jié)果，看著就煩，而且還消耗系統(tǒng)和網(wǎng)絡(luò)資源[/color]

$("#form1").ajaxSubmit( {

url : "action名字",

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

success : function(returnData){

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

var isWindow = false;

//window系統(tǒng)路徑是"\" 要進(jìn)行轉(zhuǎn)換 linux不需要轉(zhuǎn)換

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系統(tǒng)將"_"再轉(zhuǎn)換成"/"

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

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

}

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

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

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

}

}

});

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。