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

Beispielcode für die jQuery-Formularserialisierung

巴扎黑Original: 2017-06-21 16:34:581288Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für die jQuery-Formularserialisierung vorgestellt.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen ist wie folgt Gesagt:

$(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 mit Ajax nicht jeden Parameter einzeln auflisten. Setzen Sie einfach den Datenparameter auf $("form").serialize().

Die Kernmethode ist $.param(), die verwendet wird, um ein Array oder Objekt gemäß Schlüssel/Wert zu serialisieren,

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

Zusätzlich verwenden serialize Ein Vorteil besteht darin, dass es mit chinesischer Kompilierung und Verarbeitung ausgestattet ist. Daher wird die Verwendung von Serialisierung empfohlen.

2.serializeArray()

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

Rückgabewert: Serialisieren Sie das Seitenformular in ein JSON-Strukturobjekt (Schlüssel-Wert-Paar).

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: Sie müssen die PHP-Umgebung konfigurieren und den Server starten

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

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

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：Ein kurzer Test: Verwenden Sie jQuery, um eine einfache Anzeige mit Akkordeoneffekten zu implementierenNächster Artikel：Ein kurzer Test: Verwenden Sie jQuery, um eine einfache Anzeige mit Akkordeoneffekten zu implementieren

In Verbindung stehende Artikel

Mehr sehen