Maison > interface Web > js tutoriel > Ajax soumet le formulaire et reçoit la méthode json

Ajax soumet le formulaire et reçoit la méthode json

小云云
Libérer: 2017-12-19 14:09:03
original
1900 Les gens l'ont consulté

Après avoir cliqué sur le bouton, les données sont soumises au serveur sous la forme d'un formulaire et les données de retour du serveur sont reçues. La page ne s'actualise pas pendant le processus. Cet article présente principalement l'exemple de code d'Ajax soumettant un formulaire et recevant json. C'est très bien et a une valeur de référence. Les amis dans le besoin peuvent s'y référer.

code html


<html xmlns="http://www.w3.org/1999/xhtml">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 <script src="./testajaxjs.js"></script>
 <head>
 </head>
 <body>
  <form id="form1">
   <p>xingming:<input type="text" name="xingming"/></p>
   <p>nianling:<input type="text" name="nianling"/></p>
  </form>
  <button type="button" id="mybt" onclick="mysubmmit()">
   ajax提交
  </button>
 </body>
</html>
Copier après la connexion

code js


function mysubmmit(){
 $.ajax({
  type: "POST",
  url: "testajaxend.php",
  data: $(&#39;#form1&#39;).serialize(),
  async: false,
  success: function(databack){
   //console.log("chenggong");
   console.log(databack);
  },
  error: function(request){
   console.log("shibaile");
  }
 });
}
Copier après la connexion

code php backend


<?php
  $name = $_POST[&#39;xingming&#39;];
  $age = $_POST[&#39;nianling&#39;];
  $myarray = array("name"=>$name, "age"=>$age);
  $myjson = json_encode($myarray);
  echo $myjson;
?>
Copier après la connexion

Recommandations associées :

Deux méthodes de jquery implémentant le formulaire de soumission ajax

Ajax technologie formulaire de soumission ajax jquery ajax tutoriel js ajax

php HTML formulaire de soumission sans actualisation formulaire de soumission formulaire de soumission ajax formulaire de soumission js formulaire de soumission

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