Beispielanalyse des Datenparametertyps von Ajax() in JQuery_jquery

In diesem Artikel wird der Datenparametertyp von Ajax() in JQuery anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In der vorherigen Analyse wurde kurz „Zwei Möglichkeiten zur Übergabe von Datenparametern in Ajax“ vorgestellt. Nachdem wir nun ein vorläufiges Verständnis der Möglichkeiten zur Übergabe von Datenparametern in Ajax haben, analysieren wir die Arten von Datenparametern weiter in Ajax.

Angenommen, es gibt jetzt ein solches Formular, das zum Hinzufügen von Elementen verwendet wird.

<form id='addForm' action='UserAdd.action' type='post'>
  <label for='uname'>用户名</label>：<input type='text' name='uname' id='uname'><br>
  <label for='mobileIpt'>手机号：</label><input type='text' name='mobileIpt' id='mobileIpt'><br>
  <label for='birthday'>生日：</label><input type='text' name='birthday'><br>
  <input type='button' value='提交' onclick='addUser()'>
</form>

Wir möchten dieses Element nicht mit „Formular absenden“ hinzufügen, sondern mit Ajax absenden.

So haben wir es zuvor umgesetzt:

function addUser(){
  var user = {
   uname:$("#uname").val(),
   mobileIpt:$("#mobileIpt").val(),
   birthday:$("#birthday").val()
  };
  $.ajax({
   url:'UserAdd.action',
   data:user,
   type:'post',
   dataType:'text',
   success:function(msg){
    if(msg=='1'){
     console.log('添加成功');
    }else{
     console.log('添加失败')
    }
   }
  })
}

Daran ist nichts auszusetzen, aber es ist zu mühsam, die Werte von Formularelementen abzurufen.... Hier gibt es nur drei Elemente, und es ist nutzlos, wenn es viele Elemente gibt....

Bis ich eines Tages die Methode serializeArray von jquery entdeckte

Serialisierte Tabellenelemente (ähnlich der Methode „.serialize()“) geben JSON-Datenstrukturdaten zurück.

Beachten Sie, dass diese Methode ein JSON-Objekt und keine JSON-Zeichenfolge zurückgibt. Für Stringifizierungsvorgänge müssen Sie ein Plug-in oder eine Bibliothek eines Drittanbieters verwenden.

Das zurückgegebene JSON-Objekt besteht aus einem Objektarray, in dem jedes Objekt ein oder zwei Name-Wert-Paare enthält – Namensparameter und Wertparameter (wenn der Wert nicht leer ist).

Lass es uns versuchen

$('#addForm').serializeArray();
//返回数据结构，是json数组，每个对像分别name和value为key，代表这个表单元素的name和value
[
 {"name":"uname","value":""},
 {"name":"mobileIpt","value":""}, 
 {"name":"birthday","value":""}
]

Das scheint nutzlos zu sein

Lassen Sie uns die Methode JQuery.param() verwenden, um damit umzugehen:

var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"

Hey, jetzt erfüllt es unsere Anforderungen. Obwohl es nicht vom JSON-Typ ist, kann es zumindest als Daten hochgeladen werden.

Hier können wir das JSON-Array direkt in die Ajax-Daten einfügen und $.param() innerhalb von Jquery aufrufen, um es zu verarbeiten.

Werfen wir einen Blick auf die Beschreibung der jquery.param()-Methode:

Rückgabewert: StringjQuery.param(obj,[traditional])

Serialisieren Sie das Formularelement-Array oder -Objekt.

Parameter:

obj,[traditionell]

Arrays oder jQuery-Objekte werden nach Name/Wert-Paaren serialisiert, und gewöhnliche Objekte werden nach Schlüssel/Wert-Paaren serialisiert.

traditionell: Ob die traditionelle flache Serialisierung verwendet werden soll.

Demo:

$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"

Wenn man sich die Beschreibung ansieht, scheint es, dass es nichts mit uns zu tun hat. Ändern wir es in ein JSON-Array

$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="

Ist diese Konvertierung nicht erfolgreich? Warum können die Daten in unserem Formular erfolgreich in URL-Parameter konvertiert werden? Werfen wir einen Blick auf den Jquery-Quellcode

//在ajax()方法中，对json类型的数据进行了$.param()处理
if ( s.data && s.processData && typeof s.data !== "string" ) {
 s.data = jQuery.param( s.data, s.traditional );
}
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
  // Serialize the form elements
  jQuery.each( a, function() {
   add( this.name, this.value );
  });
 } else {
  // If traditional, encode the "old" way (the way 1.3.2 or older
  // did it), otherwise encode params recursively.
  for ( prefix in a ) {
   buildParams( prefix, a[ prefix ], traditional, add );
  }
 }

Jetzt verstehen Sie: Wenn es sich um JSON-Daten handelt, führen Sie eine Schleife nach der anderen durch und verwenden Sie nur deren Namensattribut und Wertattribut, um die Zeichenfolge zu verbinden.

Wenn es sich um ein normales Objekt handelt, durchlaufen Sie die Eigenschaften des Objekts in einer Schleife und verketten Sie dann die Zeichenfolgen.

Zusammenfassung:

In diesem Artikel wird also gesagt, dass in der Ajax-Funktion von jquery drei Datentypen
übergeben werden können 1. Text: „uname=alice&mobileIpt=110&birthday=1983-05-12“
2.json-Objekt: {uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}
3.json-Array:

[
 {"name":"uname","value":"alice"},
 {"name":"mobileIpt","value":"110"}, 
 {"name":"birthday","value":"2012-11-11"}
]

So können wir das Formular abrufen und mit einem Klick absenden, was sehr praktisch ist.

Ergänzung:

Tatsächlich müssen Sie zum Extrahieren von Formulardaten nur die Methode serialize() verwenden, um direkt „uname=alice&mobileIpt=110&birthday=1983-05-12“ zu erhalten.

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.