wb.ouyang

毕竟几人真得鹿，不知终日梦为鱼

导航

jquery扩展方法、表单数据格式化为json对象、json转url参数

1、jquery扩展方法（表单数据格式化为json对象）

<script type="text/javascript">
// 将表单数据序列化为一个json对象，例如 {"name":"zs", "age":10}
// 使用：var jsonObj = $("#formId").serializeObject();
$.fn.serializeObject = function()    
{    
   var o = {};    
   var a = this.serializeArray();    
   $.each(a, function() {    
       if (o[this.name]) {    
           if (!o[this.name].push) {    
               o[this.name] = [o[this.name]];    
           }    
           o[this.name].push(this.value || '');    
       } else {    
           o[this.name] = this.value || '';    
       }    
   });    
   return o;    
};  
</script>

 

2、jquery的表单序列化方法

　　（1）$("#formId").serialize(): 将所有表单选中项拼接成形如"username=zs&password=123"的字符串

　　（2）$("#formId").serializeArray(): 将表单所有选中项拼成json数组，格式为：

　　　　[{name: "username", value: "zs"},{name: "password", value: "123"}]

　　（3）$.param(jsonObj): 将json对象转换成形如"username=zs&password=123"的字符串

 

3、案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <h2>a页面</h2>
    <form id="form">
        <input type="text" name="username"/>
        <input type="text" name="password"/>
        <input type="button" value="submit" onclick="formSubmit()"/>
    </form>
</body>

<script type="text/javascript">
    function formSubmit() {
        var str = $("#form").serialize();
        console.log(str);
        var jsonArray = $("#form").serializeArray();
        
        console.log(jsonArray);
        console.log(jsonArray[0].name);
        console.log(jsonArray[0].value);
        console.log(jsonArray[1].name);
        console.log(jsonArray[1].value);
        
        var jsonObj = $("#form").serializeObject();
        console.log(jsonObj);
        console.log(jsonObj.username + "---" + jsonObj.password);

　　　　 var str = $.param(jsonObj);
        console.log(str);
    }
</script>

<script type="text/javascript">
    // 将表单数据序列化为一个json对象，例如 {"name":"zs", "age":10}
    // 使用：var jsonObj = $("#formId").serializeObject();
    $.fn.serializeObject = function()    
    {    
       var o = {};    
       var a = this.serializeArray();    
       $.each(a, function() {    
           if (o[this.name]) {    
               if (!o[this.name].push) {    
                   o[this.name] = [o[this.name]];    
               }    
               o[this.name].push(this.value || '');    
           } else {    
               o[this.name] = this.value || '';    
           }    
       });    
       return o;    
    };  
</script>
</html>

 

　　结果：

 

4、json转url参数

https://blog.csdn.net/WUJUAN_CSDN/article/details/81017811

<script src="js/jquery-1.8.0.min.js"></script>
<script language="JavaScript" type="text/javascript">
 
var parseParam = function(param, key) {
    var paramStr = "";
    if (param instanceof String || param instanceof Number || param instanceof Boolean) {
        paramStr += "&" + key + "=" + encodeURIComponent(param);
    } else { 
        $.each(param, function(i) {
            var k = key == null ? i : key + (param instanceof Array ? "[" + i + "]" : "." + i);
            paramStr += '&' + parseParam(this, k);
        });
    }
    return paramStr.substr(1);
};
 
 
var obj = {
    "name": 'tom',
    "class": {
        "className": 'class1'
    },
    "classMates": [{
        "name": 'lily'
    }]
};
console.log(parseParam(obj));//name=tom&class.className=class1&classMates[0].name=lily
console.log(parseParam(obj, 'stu'));//stu.name=tom&stu.class.className=class1&stu.classMates[0].name=lily
 
</script>

 

posted on 2019-05-12 23:51  wenbin_ouyang  阅读(2069)  评论(0)    收藏  举报