JavaScript serializes form as object and JSON

Keywords: JSON Attribute

When the front-end submits parameters to the back-end, they are usually passed in json format, while the controls that receive input parameters usually use form forms. Is there any way to sequence the parameters in form directly into objects? Here is a method:

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

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

The deserializeJSON method can directly sequence the parameters in the form into js objects, with key as the name attribute and value as the corresponding value value;

The serializeJSON method can directly convert the serialized object of deserializeJSON into a json string and pass it to the background as post data.

For example, there is a 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">Original password</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">New password</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">Confirm password</label>
                                <div class="formControls col-sm-6">
                                    <input type="password" class="input-text" value="" placeholder="" id="newConfirm" name="passwordConfirm">
                                </div>
                            </div>
                        </form>

You can write directly for transmission:

        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) {
                // Get result data
                var code = data.code;
                if (code == 0) {
                    alert("Password changed successfully!");
                } else {
                    alert(data.message);
                }
            },
            error: function() {
                alert("Error modifying password, please operate later!");
            }
        });

 

Posted by mjdamato on Wed, 01 Jan 2020 03:26:41 -0800