Ausführliche Erläuterung der Beispiele für Datenparametertypen von jQuery.Ajax()

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Datenparametertyps von jQuery.Ajax() vor. Freunde in Not können darauf zurückgreifen.

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

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

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

Früher haben wir es so implementiert:

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, den Wert zu ermitteln Formularelement.... Hier gibt es nur drei Elemente, und es wird nutzlos, wenn es viele Elemente gibt....

Bis ich eines Tages die Methode serializeArray von jquery entdeckte

Tabellenelemente serialisieren (Ähnlich der Methode „.serialize()“) gibt 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, wobei 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 nicht nützlich zu sein.

Wir verwenden JQuery.param () Werfen wir einen Blick auf die Methode:

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

Hey, das entspricht unseren Anforderungen. Obwohl es kein JSON-Typ ist, kann es zumindest als hochgeladen werden Daten.

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

Sehen wir uns die Beschreibung der Methode jquery.param() an:

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

Konvertieren Sie das Formular Elementarray oder Objektserialisierung.

Parameter

obj,[traditional]

Arrays oder jQuery-Objekte werden gemäß Name/Wert-Paaren serialisiert, und gewöhnliche Objekte werden gemäß 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 a 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 wir, dass es sich um JSON-Daten handelt, die eine Schleife nach der anderen durchführen und nur deren Namensattribute und Werte übernehmen Attribute zum Verbinden von Zeichenketten.

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 Arten von Daten übergeben werden können

1.

"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 „uname=alice&mobileIpt=110&birthday=1983-05-12"

Verwandte Empfehlungen:

“ zu erhalten Javascript - PHP-Erfassung Zum Datenparameter, wie man das Array anpasst

Zusammenfassung der Verwendung des Ajax-Methodendatenparameters in Jquery_jquery

jQuery-Formular-Plug-in formDdata-Parameterkorrektur Überprüfen Sie das Formular und senden Sie es nach der Verifizierung ab_jquery

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für Datenparametertypen von jQuery.Ajax(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!