suchen

Heim  >  Artikel  >  Web-Frontend  >  JS + Ajax implementiert die asynchrone PHP-Formularübermittlung

JS + Ajax implementiert die asynchrone PHP-Formularübermittlung

php中世界最好的语言
php中世界最好的语言Original
2018-04-04 14:53:392030Durchsuche

Dieses Mal werde ich Ihnen JS+Ajax zur Implementierung eines asynchronen PHP-Übermittlungsformulars vorstellen. Was sind die Vorsichtsmaßnahmen für JS+Ajax zur Implementierung eines asynchronen PHP-Übermittlungsformulars? sehen.

Oft ist es notwendig, Formulare asynchron zu übermitteln, wenn es zu viele Formulare gibt, wird es sehr unpraktisch, ElementById einzeln abzurufen.

Natürlich kann JQuery die asynchrone Übermittlung von Formularen mithilfe von JQuery implementieren .form.js-Bibliothek Es scheint sehr beliebt zu sein

Aber manchmal möchte ich keine zusätzlichen Bibliotheken verwenden, deshalb denke ich darüber nach, es selbst zu schreiben und reines JS zu verwenden, um die asynchrone Formularübermittlung zu implementieren

Die Implementierung ist wie folgt (in diesem Beispiel mit der POST-Methode senden und PHP als Serverskript verwenden)

HTM L-Datei: 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>

JS-Datei: 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);
}

PHP-Datei: test.php 

<?php
  if(isset($_POST[&#39;username&#39;]) {
    echo &#39;1&#39;;
  }
?>
Das Prinzip des obigen Programms besteht darin, dass der Benutzer zuerst die Benutzernameninformationen in die Datei test.html eingegeben hat, dann das Formular über Ajax über die Datei name_form.js übermittelt und dann den Vorgang ausgeführt hat In der PHP-Datei wird nur festgestellt, ob der Benutzername vorhanden ist. Wenn er vorhanden ist, können Sie ihn auch in der Datenbank bearbeiten (hinzufügen, ändern, ändern). usw.) und beurteilen Sie dann das Ergebnis der Operation. Geben Sie 1 aus und beurteilen Sie die zurückgegebenen Informationen in xmlHttp.responseText. Da nur 1 ausgegeben wird, ist die Beurteilung korrekt Es erscheint eine Eingabeaufforderung mit dem Inhalt „Beitrag erfolgreich“. Auf diese Weise haben wir die asynchrone PHP-Formularübermittlung mithilfe von Ajax erfolgreich implementiert.

Hinweis: Stellen Sie sicher, dass vor dem Echo der PHP-Datei keine Ausgabe erfolgt, damit Ajax die zurückgegebenen Informationen genau abrufen kann.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Sofort zur Anmeldeseite springen, nachdem Ajax+Session fehlgeschlagen ist

Wie man mit Sitzungsfehlern umgeht, wenn darauf zugegriffen wird Ajax

Das obige ist der detaillierte Inhalt vonJS + Ajax implementiert die asynchrone PHP-Formularübermittlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie die dynamische Verarbeitung von Komponenten in JSNächster Artikel：So implementieren Sie die dynamische Verarbeitung von Komponenten in JS

In Verbindung stehende Artikel

Mehr sehen