Maison > interface Web > js tutoriel > le corps du texte

Exemple de sérialisation de formulaire jQuery, partage d'exemples de code

小云云
Libérer: 2018-01-10 09:26:50
original
1444 Les gens l'ont consulté

Cet article présente principalement un exemple de code de sérialisation de formulaire jQuery. Les amis qui en ont besoin peuvent s'y référer. J'espère que tout le monde pourra mieux maîtriser les connaissances en matière de sérialisation de formulaire jQuery.

Sans plus tarder, je publierai le code directement pour vous. Le code spécifique est le suivant :


$(function(){
  $('#send').click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
       dataType: "json",
       success: function(data){
          // code...   
       }
     });
  });
});
$(function(){
  $('#send').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 ajax classique. request Code, qui répertorie deux formats de transfert 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 avec 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, l'avantage d'utiliser serialize est que il est livré avec un traitement de compilation chinois. Par conséquent, il est recommandé d’utiliser la sérialisation.

2.serializeArray()

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

Valeur de retour : modifiez le page Le formulaire est sérialisé 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.

Enfin, ajoutez 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

php Rappel : obligatoire Configurez l'environnement php et démarrez le serveur


<?php 
   echo json_encode($_GET);
 ?>
Copier après la connexion

Recommandations associées :

Notes sur la sérialisation des formulaires jquery

Exemple de code de sérialisation de formulaire jQuery

jQuery sérialise le formulaire en une instance d'un objet Object

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal