Ajax中表單序列化serialize()和serializeArray()的使用

Ajax中表單序列化serialize()和serializeArray()的使用

jqueyr庫中集成了完整的ajax兼容套件，其中ajax中提供的大量的方法來實現請求前傳參，請求，和請求後要做的事件等，例如：Ajax()可以用來發送完整的異步請求，post(),get()發送簡單的異步請求等，
這裏主要探討其中的兩個關於表單序列化的方法 比如：serialize()和serializeArray();

serialize() :此方法是將表單序列化爲字符串 生成的爲url編碼的文本字符串

例如：name=xiaoyang&address=zhoukou

  //使用的時候一般通過form表單的id進行序列化例如：
  var form = $("formID").serialize();

serializeArray() : 此方法主要是將表單序列化成 json數據結構數據 也就是json對象 可以對其進行編輯和內容的操作等；

  //使用的時候一般通過form表單的id進行序列化例如：
  var formArray = $("formID").serializeArray();

以如下表單進行舉例如下：

<div>
    <table>
        //創建一個表單
        <form id="formId">
            //添加表單元素
            <input type="text" name="start"  value="xioaming">
            <input type="text" name="end"  value="hahha">
            <input type="text" name="mulit" value="dfsf">
            <input type="submit" id="btn" value="提交數據">
        </form>
    </table>

</div>

使用js將表單提交 來查看兩種方式有什麼不同：

 //引入必要的jquery依賴js 上面已經說過jquery中包含完整的ajax
<script src="/static/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        //點擊提交按鈕 打印兩種序列化方式出來的字符串
        $("#btn").click(function () {
            //打印字符串序列化表單
            console.log($("#formId").serialize());
            //打印json數據格式序列化表單
            console.log($("#formId").serializeArray())
        })

        //異步提交不想一個表單一個表單的寫傳輸數據可以直接序列還表單如下：
        $.ajax({
            url:"/demo",
            type:"post",
            data:$("#formId").serialize(),
            success:function (data) {
                //請求完成之後回調函數
            }
        })
    })

</script>

打印輸出的結果如下：

由此可見 ：
serialize()輸出的url編碼後的文本字符串 可直接傳輸
serializeArray()輸出的是json數組數據 每個元素代表着每個input元素，裏面分別包含name 和value鍵值對
一般不會直接當作表單數據傳輸 而是在進行一些元素的操作和設置後轉化爲一個json對象進行傳輸
轉化爲接送對象的方法簡單如下：

 //創建一個轉化的方法
 function getFormData(formId){

     if(formId){
        //首先獲取表單的序列化數組
        var arr = $(formId).serializeArray();
        if(arr && arr.length > 0){
          var b = {};//創建一個空的對象 以便裝數組數據
          $.each(arr,function(index,it){//index爲數組的下標 it爲數組對應的數據對象 
            if(it.value){//判斷值是否爲空
                if(d[it.name]){//判斷值是否有同名的多個數據 
                    d[it.name] = d[it.name] +","+ it.value;

                }else{
                    d[it.name] = it.value;
                }
            }
          })
          return b ; // 返回已經拼裝好的對象
        }
     }
     return {};//如果不存在此id則傳出一個空的對象
 }



 //以上述數據爲例 返回的對象如下
  {"start":"xioaming","end":"hahha","mulit":"dsdf"}

多少不凡、只因不甘
一枚初出茅廬的程序員 渴望結交廣大it人士，共謀IT大業！