Maison interface Web js tutoriel Exemple de code de sérialisation de formulaire jQuery

Exemple de code de sérialisation de formulaire jQuery

Jun 21, 2017 pm 04:34 PM
jquery 代码 实例 序列化 表单

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(){
  $('#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 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


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

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Programme de codes à distance universels GE sur n'importe quel appareil Programme de codes à distance universels GE sur n'importe quel appareil Mar 02, 2024 pm 01:58 PM

Si vous devez programmer un appareil à distance, cet article vous aidera. Nous partagerons les meilleurs codes de télécommande universelle GE pour programmer n’importe quel appareil. Qu'est-ce qu'une télécommande GE ? GEUniversalRemote est une télécommande qui peut être utilisée pour contrôler plusieurs appareils tels que les téléviseurs intelligents, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, lecteurs multimédias en streaming et plus encore. Les télécommandes GEUniversal sont disponibles en différents modèles avec différentes caractéristiques et fonctions. GEUniversalRemote peut contrôler jusqu'à quatre appareils. Les meilleurs codes de télécommande universels à programmer sur n'importe quel appareil. Les télécommandes GE sont livrées avec un ensemble de codes qui leur permettent de fonctionner avec différents appareils. vous pouvez

Comment utiliser Copilot pour générer du code Comment utiliser Copilot pour générer du code Mar 23, 2024 am 10:41 AM

En tant que programmeur, je suis enthousiasmé par les outils qui simplifient l'expérience de codage. À l'aide d'outils d'intelligence artificielle, nous pouvons générer du code de démonstration et apporter les modifications nécessaires selon les exigences. Le nouvel outil Copilot dans Visual Studio Code nous permet de créer du code généré par l'IA avec des interactions de chat en langage naturel. En expliquant les fonctionnalités, nous pouvons mieux comprendre la signification du code existant. Comment utiliser Copilot pour générer du code ? Pour commencer, nous devons d’abord obtenir la dernière extension PowerPlatformTools. Pour y parvenir, vous devez vous rendre sur la page de l'extension, rechercher "PowerPlatformTool" et cliquer sur le bouton Installer.

Créer et exécuter des fichiers Linux '.a' Créer et exécuter des fichiers Linux '.a' Mar 20, 2024 pm 04:46 PM

Travailler avec des fichiers dans le système d'exploitation Linux nécessite l'utilisation de diverses commandes et techniques qui permettent aux développeurs de créer et d'exécuter efficacement des fichiers, du code, des programmes, des scripts et d'autres éléments. Dans l'environnement Linux, les fichiers portant l'extension « .a » sont d'une grande importance en tant que bibliothèques statiques. Ces bibliothèques jouent un rôle important dans le développement de logiciels, permettant aux développeurs de gérer et de partager efficacement des fonctionnalités communes sur plusieurs programmes. Pour un développement logiciel efficace dans un environnement Linux, il est crucial de comprendre comment créer et exécuter des fichiers « .a ». Cet article explique comment installer et configurer de manière complète le fichier Linux « .a ». Explorons la définition, l'objectif, la structure et les méthodes de création et d'exécution du fichier Linux « .a ». Qu'est-ce que L

L'Université Tsinghua et Zhipu AI open source GLM-4 : lancent une nouvelle révolution dans le traitement du langage naturel L'Université Tsinghua et Zhipu AI open source GLM-4 : lancent une nouvelle révolution dans le traitement du langage naturel Jun 12, 2024 pm 08:38 PM

Depuis le lancement du ChatGLM-6B le 14 mars 2023, les modèles de la série GLM ont reçu une large attention et une grande reconnaissance. Surtout après que ChatGLM3-6B soit open source, les développeurs sont pleins d'attentes pour le modèle de quatrième génération lancé par Zhipu AI. Cette attente a finalement été pleinement satisfaite avec la sortie du GLM-4-9B. La naissance du GLM-4-9B Afin de donner aux petits modèles (10B et moins) des capacités plus puissantes, l'équipe technique de GLM a lancé ce nouveau modèle open source de la série GLM de quatrième génération : GLM-4-9B après près de six mois de exploration. Ce modèle compresse considérablement la taille du modèle tout en garantissant la précision, et offre une vitesse d'inférence plus rapide et une efficacité plus élevée. L’exploration de l’équipe technique du GLM n’a pas

Créez un agent en une phrase ! Robin Li : L'ère approche où tout le monde sera développeur Créez un agent en une phrase ! Robin Li : L'ère approche où tout le monde sera développeur Apr 17, 2024 pm 02:28 PM

Le grand modèle bouleverse tout, et arrive finalement à la tête de cet éditeur. C'est aussi un Agent qui a été créé en une seule phrase. Comme ça, donnez-lui un article, et en moins d'une seconde, de nouvelles suggestions de titres sortiront. Par rapport à moi, on ne peut dire que cette efficacité est aussi rapide que l'éclair et aussi lente qu'un paresseux... Ce qui est encore plus incroyable, c'est que la création de cet Agent ne prend en réalité que quelques minutes. L'invite appartient à tante Jiang : Et si vous souhaitez également ressentir ce sentiment subversif, désormais, sur la base de la nouvelle plateforme intelligente Wenxin lancée par Baidu, chacun peut créer gratuitement son propre assistant intelligent. Vous pouvez utiliser les moteurs de recherche, les plates-formes matérielles intelligentes, la reconnaissance vocale, les cartes, les voitures et autres canaux écologiques mobiles Baidu pour permettre à davantage de personnes d'utiliser votre créativité ! Robin Li lui-même

Conseils pour utiliser les classes de formulaires Laravel : moyens d'améliorer l'efficacité Conseils pour utiliser les classes de formulaires Laravel : moyens d'améliorer l'efficacité Mar 11, 2024 pm 12:51 PM

Les formulaires font partie intégrante de la rédaction d’un site Web ou d’une application. Laravel, en tant que framework PHP populaire, fournit des classes de formulaires riches et puissantes, rendant le traitement des formulaires plus facile et plus efficace. Cet article présentera quelques conseils sur l'utilisation des classes de formulaires Laravel pour vous aider à améliorer l'efficacité du développement. Ce qui suit explique en détail à travers des exemples de code spécifiques. Créer un formulaire Pour créer un formulaire dans Laravel, vous devez d'abord écrire le formulaire HTML correspondant dans la vue. Lorsque vous travaillez avec des formulaires, vous pouvez utiliser Laravel

Comment la sérialisation Java affecte-t-elle les performances ? Comment la sérialisation Java affecte-t-elle les performances ? Apr 16, 2024 pm 06:36 PM

L'impact de la sérialisation sur les performances Java : le processus de sérialisation repose sur la réflexion, ce qui affectera considérablement les performances. La sérialisation nécessite la création d'un flux d'octets pour stocker les données d'objet, ce qui entraîne des coûts d'allocation de mémoire et de traitement. La sérialisation d'objets volumineux consomme beaucoup de mémoire et de temps. Les objets sérialisés augmentent la charge lorsqu'ils sont transmis sur le réseau.

Le modèle de code open source Mistral monte sur le trône ! Codestral est fou de formation dans plus de 80 langues, et les développeurs nationaux de Tongyi demandent à participer ! Le modèle de code open source Mistral monte sur le trône ! Codestral est fou de formation dans plus de 80 langues, et les développeurs nationaux de Tongyi demandent à participer ! Jun 08, 2024 pm 09:55 PM

Produit par 51CTO Technology Stack (WeChat ID : blog51cto) Mistral a publié son premier modèle de code Codestral-22B ! Ce qui est fou avec ce modèle, ce n'est pas seulement qu'il est formé sur plus de 80 langages de programmation, dont Swift, etc., que de nombreux modèles de code ignorent. Leurs vitesses ne sont pas exactement les mêmes. Il est nécessaire d'écrire un système de « publication/abonnement » en langage Go. Le GPT-4o ici est en cours de sortie, et Codestral remet le papier si vite qu'il est difficile de le voir ! Le modèle venant tout juste d’être lancé, il n’a pas encore été testé publiquement. Mais selon le responsable de Mistral, Codestral est actuellement le modèle de code open source le plus performant. Les amis intéressés par la photo peuvent se déplacer vers : - Faire un câlin : https

See all articles