jQuery的serializeArray（）的鍵值對

Question

我有一點麻煩序列化形式

<form> 
    <input type="text" name="name1" value="value1"/> 
    <input type="text" name="name2" value="value2"/> 
</form> 

$(form).serializeArray() 

將返回[{name:"name1",value:"value1"},{name:"name2",value:"value2"}]對。

是否有可能在形式獲得輸出

{name1:value1,name2:value2} 

，使他們更容易處理？

Answer 1

var result = { }; 
$.each($('form').serializeArray(), function() { 
    result[this.name] = this.value; 
}); 

// at this stage the result object will look as expected so you could use it 
alert('name1 = ' + result.name1 + ', name2 = ' + result.name2); 

Live demo.

Answer 2

new_obj = {} 

$.each($(form).serializeArray(), function(i, obj) { new_obj[obj.name] = obj.value }) 

你的數據是new_obj

Answer 3

接受的答案的偉大工程，如果你的表格沒有複選框或單選按鈕。由於這些組都具有相同的名稱屬性，因此您需要在對象內部創建一個數組值。因此，對於類似HTML的：

<input type="checkbox" value="1" name="the-checkbox"> 
<input type="checkbox" value="1" name="the-checkbox"> 
<input type="checkbox" value="1" name="the-checkbox"> 

你會得到：代碼

{the-checkbox:['1', '2', '3']} 

This位很好地處理一切。

/*! 
* jQuery serializeObject - v0.2 - 1/20/2010 
* http://benalman.com/projects/jquery-misc-plugins/ 
* 
* Copyright (c) 2010 "Cowboy" Ben Alman 
* Dual licensed under the MIT and GPL licenses. 
* http://benalman.com/about/license/ 
*/ 

// Whereas .serializeArray() serializes a form into an array, .serializeObject() 
// serializes a form into an (arguably more useful) object. 

(function($,undefined){ 
    '$:nomunge'; // Used by YUI compressor. 

    $.fn.serializeObject = function(){ 
    var obj = {}; 

    $.each(this.serializeArray(), function(i,o){ 
     var n = o.name, 
     v = o.value; 

     obj[n] = obj[n] === undefined ? v 
      : $.isArray(obj[n]) ? obj[n].concat(v) 
      : [ obj[n], v ]; 
    }); 

    return obj; 
    }; 

})(jQuery); 

使用

$(form).serializeObject(); 

Answer 4

$.fn.serializeObject = function() { 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      }  
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

Answer 5

這裏是Hollister的代碼中的一些現代化。

(function($,undefined){ 
    '$:nomunge'; // Used by YUI compressor. 

    $.fn.serializeObject = function(){ 
    var obj = {}, 
     names = {}; 

    $.each(this.serializeArray(), function(i,o){ 
     var n = o.name, 
     v = o.value; 

     if (n.includes('[]')) { 
      names.n = !names.n ? 1 : names.n+1; 
      var indx = names.n - 1; 
      n = n.replace('[]', '[' + indx + ']'); 
     } 

     obj[n] = obj[n] === undefined ? v 
      : $.isArray(obj[n]) ? obj[n].concat(v) 
      : [ obj[n], v ]; 
    }); 

    return obj; 
    }; 

})(jQuery); 

如果您需要字段名稱爲myvar[]複選框。

Answer 6

您可以製作自定義功能。

var complex = $(form).serialize(); // name1=value1&name2=value2 
var json = toSimpleJson(complex); // {"name1":"value1", "name2":"value2"} 

function toSimpleJson(serializedData) { 
    var ar1 = serializedData.split("&"); 
    var json = "{"; 
    for (var i = 0; i<ar1.length; i++) { 
     var ar2 = ar1[i].split("="); 
     json += i > 0 ? ", " : ""; 
     json += "\"" + ar2[0] + "\" : "; 
     json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\""; 
    } 
    json += "}"; 
    return json; 
} 

Answer 7

給您形式的ID（形式-ID）

var jsoNform = $("#form-id").serializeObject(); 

jQuery.fn.serializeObject = function() { 
    var formData = {}; 
    var formArray = this.serializeArray(); 
    for (var i = 0, n = formArray.length; i < n; ++i) 
     formData[formArray[i].name] = formArray[i].value; 
    return formData; 
};