jquery serialize form form

In development, sometimes form data needs to be submitted in js, and the form form needs to be serialized.

The serialize method provided by jquery can be implemented.

$("#searchForm").serialize();

However, observing the output information, it is found that what the serialize() method does is to concatenate the data in the form into a string in the htpp request format.

For example the following code:

    <form id="searchForm">
        <input name="id" value="123"/>
        <input name="cx" value="lklj"/>
    </form>
    <script type="text/javascript">
        console.info($("#searchForm").serialize());
    </script>

The output is: id=123&cx=lklj

 

serialize is indeed able to resolve general submission data. But sometimes what we need is an object object , not a string (for example, when setting query condition parameters when jqgrid reloads, an object object is required).

So you need to provide a method that can convert the form into an object. Reference from: http://www.cnblogs.com/yeminglong/p/3799282.html

(function(window, $) {
    $.fn.serializeJson = function() {
        var serializeObj = {};
        var array = this.serializeArray();
        var str = this.serialize();
        $(array).each(
                function() {
                    if (serializeObj[this.name]) {
                        if ($.isArray(serializeObj[this.name])) {
                            serializeObj[this.name].push(this.value);
                        } else {
                            serializeObj[this.name] = [
                                    serializeObj[this.name], this.value ];
                        }
                    } else {
                        serializeObj[this.name] = this.value;
                    }
                });
        return serializeObj;
    };
})(window, jQuery);

Call the plugin:

console.info($("#searchForm").serializeJson());

Output result: Object {id: "123", cx: "lklj"}

The serialize method provided by jquery can be implemented.

$("#searchForm").serialize();

但是，观察输出的信息，发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。

例如以下代码：

    <form id="searchForm">
        <input name="id" value="123"/>
        <input name="cx" value="lklj"/>
    </form>
    <script type="text/javascript">
        console.info($("#searchForm").serialize());
    </script>

输出结果是：id=123&cx=lklj

 

serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象，而不是字符串（比如jqgrid reload时设置查询条件参数，就需要object对象）。

所以就需要提供一个能将form转化为对象的方法。参考自：http://www.cnblogs.com/yeminglong/p/3799282.html

(function(window, $) {
    $.fn.serializeJson = function() {
        var serializeObj = {};
        var array = this.serializeArray();
        var str = this.serialize();
        $(array).each(
                function() {
                    if (serializeObj[this.name]) {
                        if ($.isArray(serializeObj[this.name])) {
                            serializeObj[this.name].push(this.value);
                        } else {
                            serializeObj[this.name] = [
                                    serializeObj[this.name], this.value ];
                        }
                    } else {
                        serializeObj[this.name] = this.value;
                    }
                });
        return serializeObj;
    };
})(window, jQuery);

Call the plugin:

console.info($("#searchForm").serializeJson());

Output result: Object {id: "123", cx: "lklj"}