Jquery 重寫序列化函數提交表單

原創

2020-02-22 04:41

在使用jquery框架開發項目時，使用ajax提交數據經常會使用Jquery序列化提交函數serialize，然而在遇到選中checkbox會提交checkbox的默認值“on”，不選中則不會提交checkbox 的name字段。如下圖所示，我想要提交一些個人信息，如果在愛好這一欄我什麼都不選則序列化函數什麼都不會提交，這將會影響我們更新數據。

而我們想要的效果是我選中時值爲“true“，不選中時爲“false“，下面介紹一種重寫serialize函數，以提交數據達到想要的效果。說一下大致的思路：
1.首先需要重寫這個函數，使用jquery的重寫函數聲明方式$.fn.serializeObject；
2.定義一個空對象o，用於存放我們接下來要遍歷的數據；
3.定義一個對象a，是序列化後的表單元素；
4.遍歷對象a，將name屬性存放於對象o，並將值賦給相應的name屬性，遇到重複的name屬性，使用嵌套數組的形式保存；
5.遍歷表單中的checkbox ，如果對象o中沒有這個屬性，則添加到o對象中，並賦值爲false，如果有這個屬性，則將值更該爲true；
6.返回對象。
測試代碼如下所示。

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>序列化表單</title>
    <script type="text/javascript" src="jquery-3.2.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $.fn.serializeObject=function(){
                var o={};
                var a=this.serializeArray();//序列化整個表單
                $.each(a,function(){//遍歷a對象
                //如果o對象中已經有重複的屬性，則需要嵌套數組重複插入
                    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||'';
                    }
                });
                var $checkbox=$('input[type=checkbox]',this);
                $.each($checkbox,function(){
                    if(!o.hasOwnProperty(this.name)){
                        o[this.name]='false';
                    }
                    else{
                        o[this.name]='true';
                    }
                });
                return o;
            }
            $("#submit").click(function(){
            console.log($("#testForm").serializeObject());
            })
        })
    </script>
</head>
<body>
    <form id="testForm">
        <div>姓名:<input type="text" name="name"></div>
        <div>年齡:<input type="text" name="age"></div>
        <div>職業:<input type="text" name="job"></div>
        <div>請選擇愛好：</div>
        <div>
            籃球：<input type="checkbox" name="basket">
            足球：<input type="checkbox" name="baseball">
            乒乓球：<input type="checkbox" name="pingpang">
        </div>
        <div>
            是否在職：
            <input type="radio" name="state" value="true">是
            <input type="radio" name="state" value="false">否
        </div>
        <div>
            <input type="button" name="" id="submit" value="提交"／>
        </div>
    </form>
</body>
</html>