recherche

Maison >interface Web >js tutoriel >Comment soumettre un formulaire en utilisant Ajax et y recevoir des données JSON

Comment soumettre un formulaire en utilisant Ajax et y recevoir des données JSON

php中世界最好的语言
php中世界最好的语言original
2018-03-31 13:43:492179parcourir

Cette fois, je vais vous montrer comment utiliser Ajax pour soumettre un formulaire et recevoir les données json qu'il contient. Quelles sont les précautions concernant l'utilisation d'Ajax pour soumettre un formulaire et recevoir les données json qu'il contient. Ce qui suit est un cas pratique. Jetons un coup d'œil.

Exigences :

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.

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>

code js

function mysubmmit(){
 $.ajax({
  type: "POST",
  url: "testajaxend.php",
  data: $('#form1').serialize(),
  async: false,
  success: function(databack){
   //console.log("chenggong");
   console.log(databack);
  },
  error: function(request){
   console.log("shibaile");
  }
 });
}

backendcode php

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

Je crois avoir lu it Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser l'ajax natif et l'ajax encapsulé (avec code)

Méthode Ajax pour implémenter Form formulaire Méthode 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!

php json ajax html 封装 JS
Déclaration：
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
Article précédent：Ajax pour implémenter le chargement infini de listes et d'options de menu déroulant secondaire (avec code)Article suivant：Ajax pour implémenter le chargement infini de listes et d'options de menu déroulant secondaire (avec code)

Articles Liés

Voir plus