recherche

Maison >interface Web >js tutoriel >JS+ajax implémente la soumission de formulaire asynchrone php

JS+ajax implémente la soumission de formulaire asynchrone php

php中世界最好的语言
php中世界最好的语言original
2018-04-04 14:53:392053parcourir

Cette fois, je vais vous présenter JS+ajax pour implémenter le formulaire de soumission asynchrone php. Quelles sont les précautions pour que JS+ajax implémente le formulaire de soumission asynchrone php. Ce qui suit est un cas pratique, prenons un. regarder.

Souvent, il est nécessaire de soumettre des formulaires de manière asynchrone. Lorsqu'il y a trop de formulaires, obtenirElementById un par un devient très peu pratique

Bien sûr, jquery peut implémenter la soumission asynchrone de formulaires, en utilisant jquery. Bibliothèque .form.js Cela semble être assez populaire

Mais parfois, je ne veux pas utiliser de bibliothèques supplémentaires, alors je pense à l'écrire moi-même et à utiliser pure js pour implémenter la soumission de formulaires asynchrones

L'implémentation est la suivante (dans cet exemple, soumettez en utilisant la méthode POST, en utilisant php comme script serveur)

Fichier HTM L : test

<html>
<head>
  <script type="text/javascript" src="name_form.js"></script>
</head>
<body>
  <form action="process.php" id="ajax_form">
    Username:<input type="text" name="username" id="username"/><br>
    <input type="button" onclick="submitForm(&#39;name_form&#39;)" value="Submit">
  </form>
  <p id="tip"></p>
</body>
</html>

Fichier JS : name_form.js

function createXmlHttp() {
  var xmlHttp = null;
   
  try {
    //Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  } catch (e) {
    //IE
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
   
  return xmlHttp;
}
 
function submitForm(formId) {
  var xmlHttp = createXmlHttp();
  if(!xmlHttp) {
    alert("您的浏览器不支持AJAX！");
    return 0;
  }
  
  var url = 'test.php';
  var postData = "";
  postData = "username=" + document.getElementById('username').value;
  postData += "t=" + Math.random();
  
  xmlHttp.open("POST", url, true);
  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      if(xmlHttp.responseText == '1') {
        alert('post successed');
      }
    }
  }
  xmlHttp.send(postData);
}

Fichier PHP : test.php 

<?php
  if(isset($_POST[&#39;username&#39;]) {
    echo &#39;1&#39;;
  }
?>

Le principe du programme ci-dessus est le suivant : d'abord, l'utilisateur a entré les informations de nom d'utilisateur dans le fichier test.html, puis a soumis le formulaire via ajax via le fichier name_form.js, puis a effectué l'opération. dans le fichier php. Il s'agit uniquement de déterminer si le nom d'utilisateur a été défini, c'est-à-dire s'il existe, sortie 1 s'il existe en plus, vous pouvez également opérer sur la base de données (ajouter, modifier, etc.), puis jugez le résultat de l'opération. Si le résultat est vrai, affichez 1 et jugez les informations renvoyées dans xmlHttp.responseText dans le fichier js. Parce qu'il ne produit que 1, le jugement est correct pour le moment. Une boîte de dialogue apparaît avec le contenu de « publication réussie ». De cette façon, nous avons implémenté avec succès la soumission de formulaire asynchrone php en utilisant ajax.

Remarque : assurez-vous qu'il n'y a pas de sortie avant l'écho du fichier php, afin que ajax puisse obtenir avec précision les informations renvoyées.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans 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 :

Sauter immédiatement à la page de connexion après l'échec d'Ajax+Session

Comment gérer l'échec de la session en cas d'accès par ajax

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：
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：Comment implémenter le traitement dynamique des composants dans JSArticle suivant：Comment implémenter le traitement dynamique des composants dans JS

Articles Liés

Voir plus