Comment soumettre un formulaire en utilisant Ajax et y recevoir des données JSON-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-31 13:43:49

original

2124 Les gens l'ont consulté

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>

Copier après la connexion

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");
  }
 });
}

Copier après la connexion

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;
?>

Copier après la connexion

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!