jquery.form.js修改源码ajax支持json格式参数

系统管理员 2022-06-17 14:37 187阅读 0赞

## 背景 ##

随着RESTFUL格式API的盛行，表单提交jqery的ajax是可以自定义提交的数据格式  
但是如果使用jquery.form.js则它默认的格式都是使用的param()方式转成了&的字符串，因此对于严格格式要求application/json的参数则无法支持自定义格式，因此动手修改源码如下；

## 1.实现param2json方法，默认jquery只有param方法 ##

/** * 将param对象转为josn格式 * @param a obj对象 * @param traditional 规定是否使用传统的方式浅层进行序列化（参数序列化）。 * @method param2Json * */
    $.param2Json = function(a, traditional) {
        var prefix, s = {}, add = function(key, value) {
            //如果value是函数，那么调用函数得到返回值作为真正的value值，如果value是null或者undefined 
            //那么直接value是空字符串，其它情况value不变！ 
            // If value is a function, invoke it and return its value 
            value = jQuery.isFunction(value) ? value() : (value == null ? ""
                    : value);
            //把key和value值都进行了转码调用encodeURIComponent 
            s[key] = value;
        };
        // Set traditional to true for jQuery <= 1.3.2 behavior. 
        if (traditional === undefined) {
            traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
        }
        // If an array was passed in, assume that it is an array of form elements. 
        if (jQuery.isArray(a) || (a.jquery && !jQuery.isPlainObject(a))) {
            // Serialize the form elements [{name:"avaue"},{age:1}]
            jQuery.each(a, function() {
                //这里面的each指向前面的数组中的内容，也就是是一个对象! 
                add(this.name, this.value);
            });
        } else {
            s=a;
        }
        // Return the resulting serialization 
        //最后把数组s中的所有的查询字符串通过&链接起来，并且把%20也就是空格用+表示! 
        return s;
    };

为了方便使用，可以把该代码放入common.js中引入页面使用，或者直接放在jquery.form.js源码的倒数第一个\}));的上一行作为它的扩展函数使用

## 2.修改源码 ##

var q;//定义q参数这行开始
            //当为json时添加我们自己的转换方式
            //when contentType is application/json type the param will be json string
            if (options.contentType&&options.contentType.indexOf('json')>0) {
                q = JSON.stringify($.param2Json(a, traditional));
            }else{
                // change param to a=v&b=v string :param(d,t) is jquery.js methond
                q = $.param(a, traditional);//原有参数转换方式
            }
            //

## 3.使用方式 ##

var form = $("form[name=dataForm]"); 
                form.ajaxSubmit({
                    url:sysMessageTep.basePath,
                    contentType: "application/json; charset=utf-8", //加上 contentType
                    dataType: "json",
                    type:"put",
                    success:function(res){ 
    
                }
            });