bootstrap-table中ajaxOptions配置&ajax传参问题

bootstrap-table中ajaxOptions配置&ajax传参问题

1、bootstrap-table配置的几个配置

{
    url:"",
    method:"post",
    contentType:"application/json",//发送到服务器的数据编码类型
    queryParams:function(params)//请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数
    {
        return params;
    },
    ajaxOptions:{}//提交ajax请求时的附加参数,可用参数列请查看http://api.jquery.com/jQuery.ajax
}


参考BootstrapTable文档

2、这篇文档要解决的问题

{
    url : "${pageContext.request.contextPath}/manage/post_right",
    method : "post",
    //contentType : "application/x-www-form-urlencoded; charset=UTF-8", 
    ajaxOptions ://注释1
    {
        data :
        {
            'a' :'value1',
            'b' :'value2',
        }
    },
}

后端获取不到a、b参数的值。
网上查了一下,说是因为contentType在bootstrap-table中默认application/json,但是改掉后还是不行。
最后看了下源码,才找到问题

3、后端获取不到参数值的原因

在bootstrap-table.js源码中BootstrapTable.prototype.initServer方法中

3.1、下面这条语句是生成请求参数的

会合并options.queryParams、params的值

data = calculateObjectValue(this.options, this.options.queryParams, [params], data);

3.2、下面这条语句是生成请求主体

request = $.extend({}, calculateObjectValue(null, this.options.ajaxOptions), {
    type: this.options.method,
    url:  url || this.options.url,
    data: this.options.contentType === 'application/json' && this.options.method === 'post' ?
        JSON.stringify(data) : data,//3
    cache: this.options.cache,
    contentType: this.options.contentType,
    dataType: this.options.dataType,
    success: function (res) {
        res = calculateObjectValue(that.options, that.options.responseHandler, [res], res);

        that.load(res);
        that.trigger('load-success', res);
        if (!silent) that.$tableLoading.hide();
    },
    error: function (res) {
        that.trigger('load-error', res.status, res);
        if (!silent) that.$tableLoading.hide();
    }
});

这条语句,$.extend({}, a, b),
其中a:

a = {                           (见注释内容是1的位置)
    data :
    {
        'a' :'value1',
        'b' :'value2',
    }
}

其中b也是一个对象,属性比较多。
这条语句,b.data会直接覆盖a.data,故ajaxOptions中配置data属性是无用的。
准确的来说,ajaxOptions配置type、url、data、cache、contentType、dataType、success、error都是无用的。

3.3、执行

this._xhr = $.ajax(request);

4、解决方法

{
    url : "${pageContext.request.contextPath}/manage/post_right",
    method : "post",
    contentType : "application/x-www-form-urlencoded; charset=UTF-8", 
    queryParams : function(params)
    {
        params.a = 'value1';
        params.b = 'value2';
        return params;
    },
}

1、将contentType 改成常用的请求类型:application/x-www-form-urlencoded; charset=UTF-8
2、将请求参数不要放在ajaxOptions.data里,而是在queryParams中添加


版权声明:本文为wei549434510原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。