Exemple de code de sérialisation de formulaire jQuery-js tutoriel-php.cn

Exemple de code de sérialisation de formulaire jQuery

巴扎黑

Libérer： 2017-06-21 16:34:58

original

1280 Les gens l'ont consulté

Cet article présente principalement l'exemple de code de sérialisation de formulaire jQuery. Les amis qui en ont besoin peuvent s'y référer

Sans plus tarder, je publierai directement le code pour vous. est le suivant Dit :

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

Copier après la connexion

Ce qui précède est un code de requête ajax standard, qui répertorie deux formats de transmission de paramètres de données.

Afin de faciliter l'acquisition des paramètres de données lors des requêtes ajax, jquery définit plusieurs méthodes rapides.

1.serialize()

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

Valeur de retour : Le formulaire Le contenu est sérialisé dans une chaîne.

De cette façon, lorsque vous soumettez des données de formulaire via ajax, vous n'avez pas besoin de lister chaque paramètre un par un. Définissez simplement le paramètre data sur $("form").serialize().

La méthode principale est $.param(), qui est utilisée pour sérialiser un tableau ou un objet en fonction de la clé/valeur,

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

De plus, utilisez Serialize L'un des avantages est qu'il est livré avec une compilation et un traitement chinois. Par conséquent, il est recommandé d’utiliser la sérialisation.

2.serializeArray()

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

Valeur de retour : sérialisez le formulaire de page dans un objet de structure JSON (paire clé-valeur).

Par exemple, [{"name":"lihui", "age":"20"},{...}] obtient les données sous la forme jsonData[index].name

En résumé : lorsque vous utilisez ajax pour soumettre des données de formulaire, le paramètre data peut être défini sur $(form).serialize() ou $(form).serializeArray(). De plus, il est recommandé de se référer au w3c pour quelques détails.

Ajoutez enfin un exemple complet.

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>

Copier après la connexion

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>

Copier après la connexion

Rappel php : Vous devez configurer l'environnement php et démarrer le serveur