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

本文转载自查看原文 2019-05-12 23:51 839 JS | jquery/ 封装

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>

　　结果：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 将json数据格式化显示 jQuery 将表单序列化为Json对象 JSON运用——PHP中使用json数据格式定义字面量对象的方法 java 实现JSON数据格式化将json数据格式化展示在页面上前端json数据格式化显示 C# Json数据格式化 json数据格式化显示在html中 JSON数据格式 JSON数据格式