1. 程式人生 > >JavaScript序列化form為物件和JSON

JavaScript序列化form為物件和JSON

  前端提交引數給後端時,通常是用json格式做傳遞,而接收輸入引數的控制元件一般都用form表單,有沒有辦法可以將form裡的引數直接序列化成物件呢,以下提供了一種方法:

    function deserializeJSON($form) {
        var res = {};
        $.each($form.serializeArray(), function() {
            res[this.name] = this.value;
        });
        return res;
    };

    function serializeJSON($form) {
        return JSON.stringify(deserializeJSON($form));
    };

  deserializeJSON 方法可以將form裡的引數直接序列化成js物件,key為name屬性,而value則是對應的value值;

  serializeJSON  方法可將deserializeJSON序列化出來的物件直接轉成json串,作為post的data傳遞給後臺。

 比如有個form:

            <form class="passwordForm form form-horizontal" name="passwordForm">
                            <input type="text" class="input-text hidden" value="" placeholder="" name="userId">
                            <div class="row cl">
                                <label class="form-label col-sm-3">原始密碼</label>
                                <div class="formControls col-sm-6">
                                    <input type="password" class="input-text" value="" placeholder="" id="oldPassword" name="cellNo">
                                </div>
                            </div>
                            <div class="row cl">
                                <label class="form-label col-sm-3">新的密碼</label>
                                <div class="formControls col-sm-6">
                                    <input type="password" class="input-text" value="" placeholder="" id="newPassword" name="userPassword">
                                </div>
                            </div>
                            <div class="row cl">
                                <label class="form-label col-sm-3">確認密碼</label>
                                <div class="formControls col-sm-6">
                                    <input type="password" class="input-text" value="" placeholder="" id="newConfirm" name="passwordConfirm">
                                </div>
                            </div>
                        </form>

可以直接寫進行傳遞:

        var formJson = utility.serializeJSON($(".passwordForm"));
        $.ajax({
            url: "/user/change_password",
            type: 'POST',
            timeout: 30000,
            dataType: "json",
            data: formJson,
            contentType: "application/json; charset=utf-8",
            crossDomain: true,
            success: function(data) {
                // 獲取結果資料
                var code = data.code;
                if (code == 0) {
                    alert("修改密碼成功!");
                } else {
                    alert(data.message);
                }
            },
            error: function() {
                alert("修改密碼出錯,請稍後操作!");
            }
        });