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

Beispielcode für die jQuery-Formularserialisierung

巴扎黑

Freigeben： 2017-06-21 16:34:58

Original

1308 Leute haben es durchsucht

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

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 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>

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

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

Nach dem Login kopieren

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!