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ù)形式

mark

后臺(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)

mark

傳遞過去的數(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ù)形式如下：

mark

這樣在后臺(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ù)

mark

細(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ù)

mark

*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ù)。