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刪除。

猜您在找 toJSON() 方法，將 Date 對象轉換為字符串，並格式化為 JSON 數據格式。 Jquery如何序列化form表單數據為JSON對象 json數據格式化功能將json數據格式化顯示 jQuery 將表單序列化為Json對象 Jquery 將表單序列化為Json對象 json數據格式及json格式化工具推薦通過jquery的serializearray處理表單數據成json格式，並提交到后台處理 JSON運用——PHP中使用json數據格式定義字面量對象的方法 java 實現JSON數據格式化