jQuery serializeArray() cặp giá trị key

Question

Tôi đang gặp một chút rắc rối serializing một hình thức

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

$(form).serializeArray() 

Sẽ trở lại [{name:"name1",value:"value1"},{name:"name2",value:"value2"}] cặp.

Có thể nhận được kết quả dưới dạng

{name1:value1,name2:value2} 

Vì vậy, rằng họ là dễ dàng hơn để xử lý?

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 }) 

dữ liệu của bạn trong new_obj

Answer 3

Câu trả lời được chấp nhận làm việc tuyệt vời nếu hình thức của bạn không có hộp kiểm hoặc nút radio. Vì các nhóm của tất cả đều có cùng thuộc tính name, bạn cần tạo một giá trị mảng bên trong đối tượng. Vì vậy, đối html như:

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

Bạn sẽ nhận được:

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

This chút mã xử lý tất cả mọi thứ độc đáo.

/*! 
* 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); 

Cách sử dụng

$(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

Dưới đây là một số hiện đại hóa của mã Hollister 's.

(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); 

Trong trường hợp bạn cần tên trường là myvar[] cho hộp kiểm.

Answer 6

Bạn có thể thực hiện chức năng tùy chỉnh.

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

Cho hình thức của bạn một id (mẫu-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; 
};