Ajax请求数据传递的问题

问题描述 在一个项目的编写中，由于前台与后天的数据交换，我们会很频繁的使用到Ajax请求，这是就会出现很多的小问题导致我们传递数据失败或者传递过去错误的数据。

细节一：get请求与post请求的应用，两者除了加密的问题，另一点也就涉及到数据量的问题，当我们想要传递的数据量很大，这个时候就需要使用post请求，get请求就相当于是将数据加载url后可能出现过长的问题倒是数据请求失败

细节二：格式上的问题，Ajax请求可以使用很多的格式

• 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",  //设置传参的格式
})

这种方式传递过去的数据形式

mark

后台接受数据：

@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));
}

我们可以用一个实体类的对象来接受各个对应的参数，也可以用@RequestParam注释来获得数据。

注意点：当我们用这种形式来传递一个数组形式的数据时会出现

mark

传递过去的数组形式是每个参数后面会有一个 [] 这样的形式，这样后台接受到的数据就需要处理参数带有[或 ]的问题，虽然我可以在后台通过替换字符的方式达到处理数据的目的，但是这样始终是存在隐患的，最好是在前台就将数据处理好。

处理方法：在Ajax中加一个参数的限定

$.ajax({
    type: 'GET',
    url: "${base.contextPath}/hmdmwfl/batch/submit",
    traditional: true,   //这里设置为true,用来序列化数组参数
    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; 这个参数的设置可以用来序列化数组，处理之后的数据形式如下：

mark

这样在后台就无需处理 “[]”的问题了

• 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,//这里设置为true
    contentType: "application/json",  //设置传参的格式
    success: function (data) {
        datas =data;
    }
});

这种格式也是我们hap用的最多的一种格式，这种格式主要就是注意后台用什么对象来接收数据

mark

细节:就是看你传递的数据最外围是{}还是[],像上面这种传递过去的参数就是用{}包裹的，这个时候后台就应该用对象来接收，同时注意的就是用@RequestBody注释来直接获取请求的body中的数据这样的话取数据就会麻烦一些。

$.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,
});

我们可以手动添加一个[],这样在后来就可以用List来接收参数

mark
这样取数据就可以直接遍历list中的实体类对象了。

*hap框架中需要注意的一点：因为hap用的kendo ui框架，数据的使用多用到viewModel，我们在自定义一个Ajax时会出现当一个input输入框中的值是手动删除清空的情况下，会将这个input的值变为“”空字符，而不是 null，可能就出现用这个字段去查询查不到值的情况，这个问题的解决方法框架已经封装好就是 Hap.prepareQueryParameter(viewModel.model.toJSON())这个方法，会帮助去掉空字符的参数。