Heim > Artikel > Web-Frontend > Beispielcode für die jQuery-Formularserialisierung zum Teilen

Beispielcode für die jQuery-Formularserialisierung zum Teilen

小云云Original: 2018-01-10 09:26:501427Durchsuche

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...
      }
    });
  });
});

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>

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>

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

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

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!

php JavaScript json jquery ajax html Object 字符串 var console 对象

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Analyse der Prinzipien, Vor- und Nachteile von AjaxNächster Artikel：Eine kurze Analyse der Prinzipien, Vor- und Nachteile von Ajax

In Verbindung stehende Artikel

Mehr sehen