jquery序列化form表單

在開發中有時須要在js中提交form表單數據，就須要將form表單進行序列化。

jquery提供的serialize方法可以實現。

$("#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);

調用插件：

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

輸出結果：Object {id: "123", cx: "lklj"}

 

文章可能沒有多深或多新穎的知識點，但都是本身親手實踐，記錄本身感覺與收穫。