JS+ajax implémente la soumission de formulaire asynchrone php-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-04 14:53:39

original

2065 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

Fichier PHP : test.php

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

Copier après la connexion

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!