Ajax請(qǐng)求數(shù)據(jù)傳遞的問題
問題描述 在一個(gè)項(xiàng)目的編寫中，由于前臺(tái)與后天的數(shù)據(jù)交換积担，我們會(huì)很頻繁的使用到Ajax請(qǐng)求，這是就會(huì)出現(xiàn)很多的小問題導(dǎo)致我們傳遞數(shù)據(jù)失敗或者傳遞過去錯(cuò)誤的數(shù)據(jù)。
細(xì)節(jié)一：get請(qǐng)求與post請(qǐng)求的應(yīng)用，兩者除了加密的問題易桃，另一點(diǎn)也就涉及到數(shù)據(jù)量的問題褥琐，當(dāng)我們想要傳遞的數(shù)據(jù)量很大锌俱，這個(gè)時(shí)候就需要使用post請(qǐng)求，get請(qǐng)求就相當(dāng)于是將數(shù)據(jù)加載url后可能出現(xiàn)過長(zhǎng)的問題倒是數(shù)據(jù)請(qǐng)求失敗
細(xì)節(jié)二：格式上的問題敌呈，Ajax請(qǐng)求可以使用很多的格式
-
application/x-www-form-urlencoded格式
$.ajax({
url: "${base.contextPath}/cux/gxp/vendor/basic/query",
type:'POST',
dataType: "json",
data: (function(){
window.viewModel.model.set("page",1);
window.viewModel.model.set("pageSize",100000);
return Hap.prepareQueryParameter(viewModel.model.toJSON());
})(),
contentType: "application/x-www-form-urlencoded", //設(shè)置傳參的格式
})
這種方式傳遞過去的數(shù)據(jù)形式
后臺(tái)接受數(shù)據(jù)：
@RequestMapping(value = "/cux/gxp/vendor/basic/query")
@ResponseBody
public ResponseData query(GxpVendorBasic dto, @RequestParam(defaultValue = DEFAULT_PAGE) int page,
@RequestParam(defaultValue = DEFAULT_PAGE_SIZE) int pageSize, HttpServletRequest request) {
IRequest requestContext = createRequestContext(request);
return new ResponseData(service.selectVendor(requestContext,dto,page,pageSize));
}
我們可以用一個(gè)實(shí)體類的對(duì)象來接受各個(gè)對(duì)應(yīng)的參數(shù)贸宏，也可以用@RequestParam注釋來獲得數(shù)據(jù)造寝。
注意點(diǎn)：當(dāng)我們用這種形式來傳遞一個(gè)數(shù)組形式的數(shù)據(jù)時(shí)會(huì)出現(xiàn)
傳遞過去的數(shù)組形式是每個(gè)參數(shù)后面會(huì)有一個(gè) [] 這樣的形式，這樣后臺(tái)接受到的數(shù)據(jù)就需要處理參數(shù)帶有[或 ]的問題吭练，雖然我可以在后臺(tái)通過替換字符的方式達(dá)到處理數(shù)據(jù)的目的诫龙，但是這樣始終是存在隱患的，最好是在前臺(tái)就將數(shù)據(jù)處理好鲫咽。
處理方法：在Ajax中加一個(gè)參數(shù)的限定
$.ajax({
type: 'GET',
url: "${base.contextPath}/hmdmwfl/batch/submit",
traditional: true, //這里設(shè)置為true,用來序列化數(shù)組參數(shù)
success: function (json) {
kendo.ui.showInfoDialog({
message: json.message
}).done(function () {
if (json.success) {
window.location.reload();
}
});
},
async: false,
dataType: "json",
data: {"docIds": docIds, "approveCode": approveCode}
});
就是其中的 traditional: true; 這個(gè)參數(shù)的設(shè)置可以用來序列化數(shù)組签赃，處理之后的數(shù)據(jù)形式如下：
這樣在后臺(tái)就無需處理 “[]”的問題了
-
contentType: "application/json"格式
$.ajax({
url: "${base.contextPath}/hmdmwfl/query/canclewf",
type:'POST',
dataType: "json",
data:(function(){
return JSON.stringify({"ids":basicIds,"approveCode":approveCode,"uids":uids});
})(),
async:false,
traditional: true,//這里設(shè)置為true
contentType: "application/json", //設(shè)置傳參的格式
success: function (data) {
datas =data;
}
});
這種格式也是我們hap用的最多的一種格式，這種格式主要就是注意后臺(tái)用什么對(duì)象來接收數(shù)據(jù)
細(xì)節(jié):就是看你傳遞的數(shù)據(jù)最外圍是
{}還是[],像上面這種傳遞過去的參數(shù)就是用{}包裹的分尸，這個(gè)時(shí)候后臺(tái)就應(yīng)該用對(duì)象來接收锦聊，同時(shí)注意的就是用@RequestBody注釋來直接獲取請(qǐng)求的body中的數(shù)據(jù)這樣的話取數(shù)據(jù)就會(huì)麻煩一些。
$.ajax({
url:"${base.contextPath}/cux/gxp/vendor/basic/ignore/submit",
dataType:"json",
contentType:"application/json",
type:"POST",
data:(function(){
return JSON.stringify([{"basicId":basicIds[i]}]);
})(),
async:false,
});
我們可以手動(dòng)添加一個(gè)[],這樣在后來就可以用List來接收參數(shù)
這樣取數(shù)據(jù)就可以直接遍歷list中的實(shí)體類對(duì)象了箩绍。
*hap框架中需要注意的一點(diǎn)：因?yàn)?code>hap用的kendo ui框架孔庭，數(shù)據(jù)的使用多用到viewModel，我們?cè)谧远x一個(gè)Ajax時(shí)會(huì)出現(xiàn)當(dāng)一個(gè)input輸入框中的值是手動(dòng)刪除清空的情況下材蛛，會(huì)將這個(gè)input的值變?yōu)?code>“”空字符圆到，而不是 null，可能就出現(xiàn)用這個(gè)字段去查詢查不到值的情況卑吭，這個(gè)問題的解決方法框架已經(jīng)封裝好就是 Hap.prepareQueryParameter(viewModel.model.toJSON())這個(gè)方法芽淡，會(huì)幫助去掉空字符的參數(shù)。
