jQuery serializeArray (pary) wartość klucza

Question

Mam trochę problemów szeregowania formularz

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

$(form).serializeArray() 

Wrócimy [{name:"name1",value:"value1"},{name:"name2",value:"value2"}] par.

Czy to możliwe, aby uzyskać wyjście w postaci

{name1:value1,name2:value2} 

więc, że są one łatwiejsze w użyciu?

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

Twoje dane są w new_obj

Answer 3

Zaakceptowanych odpowiedź działa świetnie, jeśli formularz nie mają wyboru lub przyciski radiowe. Ponieważ grupy tych wszystkich mają ten sam atrybut nazwy, musisz utworzyć wartość tablicy wewnątrz obiektu. Więc dla html jak:

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

Dostaniesz:

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

This fragment kodu obsługuje wszystko ładnie.

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

Wykorzystanie

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

Oto modernizacja kodu 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); 

Jeśli potrzebujesz pól z nazwami jako myvar[] dla pól wyboru.

Answer 6

Można wykonać funkcję niestandardową.

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

Daj formularza identyfikator (formularz-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; 
};