Detaillierte Erläuterung der Beispiele für Datenparametertypen von JQuery.Ajax()_jquery

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 Array von Objekten, von denen jedes ein oder zwei Name-Wert-Paare enthält – den Namensparameter und den Wertparameter (sofern 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:

返回值:StringjQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。
参数
obj,[traditional]
数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化。
traditional:是否使用传统的方式浅层序列化。
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.

ps: Zusammenfassung der Verwendung des Datenparameters der Ajax-Methode in jquery

$.ajax({
  type: post,
  url: some.php,
  data: name=john&location=boston, //第一种方式传参
 // data: {name:john,location:boston} //第二种方式传参
 // data: {foo:[bar1, bar2]} 转换为 '&foo=bar1&foo=bar2'
 /*
 第一种我们用url传参，参数里面如果加带&这个符号地话，可能参数接收不到或不完整，
 如“ data: name=john&location=boston,” 如果name地值是john&smith这样写可能就会有问题，
 我们可以用js里面地encodeuricomponent()方法进行转义，
 但如果用data: {name:john,location:boston}这种方式写地话就不需要进行转义，
 如果转义地话，接收地将是转义后地字符串
 */
  success: function(msg){
   alert( data saved: + msg );
  }
});