jQuery ajax - serializeArray() method

jQuery Ajax Εγχειρίδιο Σημειώσεων

Example

Output the serialized form values in array form:

$("button").click(function(){
  x=$("form").serializeArray();
  $.each(x, function(i, field){
    $("#results").append(field.name + ":" + field.value + " ");
  );
);

Try it yourself

Definition and usage

The serializeArray() method creates an object array (name and value) by serializing form values.

You can select one or more form elements (such as input and/or textarea), or the form element itself.

Syntax

$(selector).serializeArray()

Detailed description

The serializeArray() method serializes form elements (similar .serialize() method), returning JSON data structure data.

Note:This method returns a JSON object, not a JSON string. You need to use a plugin or a third-party library for stringification.

The returned JSON object is an array of objects, each containing one or two name-value pairs - name parameter and value parameter (if the value is not empty). For example:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // The value is empty
]

.serializeArray() method uses the W3C about successful controlsστον πρότυπο (εφαρμοσμένος έλεγχος) για να προσδιορίσουν ποια στοιχεία πρέπει να περιλαμβάνονται. Ειδική σημείωση, τα στοιχεία δεν πρέπει να είναι απενεργοποιημένα (τα απενεργοποιημένα στοιχεία δεν περιλαμβάνονται), και πρέπει να έχουν το χαρακτηριστικό name. Οι τιμές των κουμπιών υποβολής δεν θα σειριακοποιηθούν. Οι τιμές των στοιχείων επιλογής αρχείων δεν θα σειριακοποιηθούν.

Η μέθοδος αυτή επιτρέπει τη λειτουργία αντικειμένων που έχουν επιλεγεί ξεχωριστά στο μορφωμένο έγγραφο, όπως <input>, <textarea> και <select>. Ωστόσο, μια πιο εύκολη μέθοδος είναι να επιλέξετε άμεσα το ετικέτα <form> για να εκτελέσετε τη σειρά χειρισμού. 

$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
);

Το παρακάτω κώδικας παράγει την παρακάτω δομή δεδομένων (υποθέτοντας ότι ο περιηγητής υποστηρίζει console.log):

[
  {
    name: a
    value: 1
  },
  {
    name: b
    value: 2
  },
  {
    name: c
    value: 3
  },
  {
    name: d
    value: 4
  },
  {
    name: e
    value: 5
  }
]

Παράδειγμα

Αποκτήστε το περιεχόμενο της φόρμας και εισάγετε στον ιστότοπο:

HTML 代码：

<p id="results"><b>Results:</b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

jQuery 代码：

var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
);

jQuery Ajax Εγχειρίδιο Σημειώσεων