Beispielcode für die jQuery-Formularserialisierung zum Teilen-js-Tutorial-php.cn

Beispielcode für die jQuery-Formularserialisierung zum Teilen

小云云

Freigeben： 2018-01-10 09:26:50

Original

1478 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode für die jQuery-Formularserialisierung vorgestellt. Freunde, die ihn benötigen, können darauf zurückgreifen. Ich hoffe, dass jeder das Wissen über die jQuery-Formularserialisierung besser beherrschen kann.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen. Der spezifische Code lautet wie folgt:

$(function(){
  $(&#39;#send&#39;).click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
       dataType: "json",
       success: function(data){
          // code...   
       }
     });
  });
});
$(function(){
  $(&#39;#send&#39;).click(function(){
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
      type: "GET",
      url: "test.json",
      data: "username"+username+"&password"+password, // 参数为字符串拼接，并用&连接
      dataType: "json",
      success: function(data){
        // code...
      }
    });
  });
});

Nach dem Login kopieren

Das Obige ist ein regulärer Ajax Anforderungscode, der zwei Übertragungsformate von Datenparametern auflistet.

Um die Erfassung von Datenparametern bei Ajax-Anfragen zu erleichtern, definiert jquery mehrere schnelle Methoden.

1.serialize()

Verwendung: var data = $("form").serialize();

Rückgabewert: Das Formular Der Inhalt wird in einen String serialisiert.

Auf diese Weise müssen Sie beim Senden von Formulardaten über Ajax nicht jeden Parameter einzeln auflisten. Setzen Sie einfach den Datenparameter auf $("form").serialize().

Die Kernmethode ist $.param(), die zum Serialisieren eines Arrays oder Objekts gemäß Schlüssel/Wert verwendet wird

var obj = {first:"one",last:" two"};
var str = $.param(obj);
console.log(str); // first=one&last=two

Darüber hinaus besteht der Vorteil der Verwendung von Serialize darin Es kommt mit chinesischer Kompilierungsverarbeitung. Daher wird die Verwendung von Serialisierung empfohlen.

2.serializeArray()

Verwendung: var jsonData = $("form").serializeArray();

Rückgabewert: Ändern Sie die Seite Das Formular wird in ein JSON-Strukturobjekt (Schlüssel-Wert-Paar) serialisiert.

Zum Beispiel erhält [{"name":"lihui", "age"::20"},{...}] die Daten als jsonData[index].name

Zusammenfassend: Wenn Sie Ajax zum Senden von Formulardaten verwenden, kann der Datenparameter auf $(form).serialize() oder $(form).serializeArray() gesetzt werden. Darüber hinaus wird empfohlen, sich für einige Details an w3c zu wenden.

Fügen Sie abschließend ein vollständiges Beispiel hinzu.

html:

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form id="demo">
    <input type="text" value="demo1" name="demo1">
    <input type="text" value="demo2" name="demo2">
    <input type="text" value="demo3" name="demo3">
    <input type="submit" value="提交" id="submit">
  </form>
</body>
</html>

Nach dem Login kopieren

JavaScript:

<script>
  // 别忘了引入jquery !!!
  $(function(){
    $("#submit").click(function(){
    // var data = $("form").serializeArray();
      var data = $("form").serialize();
      $.ajax({
        type:"GET",
        url:"1.php",
        data:data,
        dataType:"json",
        success:function(data){
          console.log(data);
        },
        error:function(xhr,error){
          console.log(error);
        }
      })
    })
  })
</script>

Nach dem Login kopieren

php Erinnerung: Erforderlich Konfigurieren Sie die PHP-Umgebung und starten Sie den Server

<?php 
   echo json_encode($_GET);
 ?>

Nach dem Login kopieren

Verwandte Empfehlungen:

Hinweise zur JQuery-Formularserialisierung

Beispielcode für die Serialisierung von jQuery-Formularen

jQuery serialisiert das Formular in eine Instanz eines Objektobjekts

Das obige ist der detaillierte Inhalt vonBeispielcode für die jQuery-Formularserialisierung zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!