Implementieren der Formularübermittlung ohne Aktualisierung der Seite basierend auf HTML

Implementieren der Formularübermittlung ohne Aktualisierung der Seite basierend auf HTML
Die Verwendung von Ajax zum Implementieren der Formularübermittlung ohne Aktualisieren der Seite wird in Projekten häufig verwendet. Vor einiger Zeit habe ich von meinem Meister mehrere andere Methoden zum Absenden von Formularen ohne Aktualisierung gelernt, die hauptsächlich auf dem Iframe-Framework basieren. Jetzt habe ich es geklärt und mit allen geteilt.
Der Erste:
 (HTML-Seite)
HTML- CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML>
  2. <html lang="en- US " >
  3. <Kopf>
  4. <meta charset= "utf-8" >
  5. <title>Formular ohne Aktualisieren absenden</title>
  6. <Stiltyp= "text/css" >
  7. ul{ Listenstiltyp: keine;}
  8. </Stil>
  9. </Kopf>
  10. <Text>
  11. <iframe name= "formsubmit" style= "anzeige:keine;" >
  12. </iframe>
  13. <!-- Richten Sie das Fenster zum Senden des Formulars auf das ausgeblendete IFRMA und senden Sie die Daten über das IFRMA. -->
  14. <Formularaktion = "form.php" Methode = "POST" Name = "formphp" Ziel = "formsubmit" >
  15. <ul>
  16. <li>
  17. <label for = "uname" >Benutzername: </label>
  18. <Eingabetyp= "Text" Name= "uname" ID= "uname" />
  19. </li>
  20. <li>
  21. <label for = "pwd" >Passwort:</label>
  22. <input type= "Passwort" name= "pwd" id= "pwd" />
  23. </li>
  24. <li>
  25. <input type= "submit" value= "Anmelden" />
  26. </li>
  27. </ul>
  28. </form>
  29. </body>
  30. </html>
  31.   
  32. (PHP-Seite: form.php)
  33.   
  34. <?php
  35. // Nicht-Leer-Verifizierung   
  36. wenn (leer($_POST[ 'uname' ]) || leer($_POST[ 'pwd' ]))
  37. {
  38. echo '<script type="text/javascript">alert("Benutzername oder Passwort ist leer!");</script>' ;
  39. Ausfahrt;
  40. }
  41. //Passwort bestätigen   
  42. wenn ($_POST[ 'uname' ] != 'jack' || $_POST[ 'pwd' ] != '123456' )
  43. {
  44. echo '<script type="text/javascript">alert("Falscher Benutzername oder Passwort!");</script>' ;
  45. Ausfahrt;
  46. } anders {
  47. echo '<script type="text/javascript">alert("Anmeldung erfolgreich!");</script>' ;
  48. Ausfahrt;
  49. }


Zweiter Typ:
(HTML-Seite)

HTML- CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML>
  2. <html lang="en- US " >
  3. <Kopf>
  4. <meta charset= "utf-8" >
  5. <title>Iframe-Übermittlungsformular</title>
  6. </Kopf>
  7. <Text>
  8. <iframe name= "meiniframe" style= "anzeige:keine;" onload= "iframeLoad(dies);" ></iframe>
  9. <Formularaktion = "form.php" Ziel = "myiframe" Methode = "POST" >
  10. Benutzername:<input type= "text" name= "username" /><br/>
  11. Passwort:<input type= "password" name= "userpwd" /><br/>
  12. <input type= "submit" value= "Anmelden" />
  13. </form>
  14. <Skripttyp = "Text/Javascript" >
  15. Funktion iframeLoad(iframe){
  16. var doc = iframe.contentWindow.document;
  17. var html = doc.body.innerHTML;
  18. wenn (html != '' ){
  19. //Konvertiere die erhaltenen JSON-Daten in ein JSON-Objekt   
  20. var obj = eval( "(" +html+ ")" );
  21. //Beurteilen Sie den zurückgegebenen Status   
  22. wenn (Objektstatus < 1){
  23. Alarm (Objekt.Nachricht);
  24. } anders {
  25. Alarm (Objekt.Nachricht);
  26. window.location.href = "http://www.baidu.com" ;
  27. }
  28. }
  29. }
  30. </Skript>
  31. </body>
  32. </html>

(PHP-Seite: form.php)

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <? php     
  2. //Stellen Sie die Zeitzone ein
  3. date_default_timezone_set('VRC');
  4. /*
  5. Zurückgegebene Commit-Nachricht
  6. Status: Status
  7. msg: Sofortnachricht
  8. */
  9. $ msg = Array ('status' = > 0, 'msg' = > '');
  10. //Die übermittelten Daten abrufen
  11. $ name = $_POST['Benutzername'];
  12. $ pwd = $_POST['Benutzerpwd'];
  13. //Anmeldeüberprüfung simulieren
  14. $ Benutzer = Array ();
  15. $Benutzer['name'] = 'jack';
  16. $user['pwd'] = 'jack2014';
  17. wenn($name != $user['name']){
  18. $msg['msg'] = 'Der Benutzer ist nicht registriert!';
  19. $ str = json_encode ($msg);
  20. echo $str;
  21. Ausfahrt;
  22. }sonst wenn($pwd != $user['pwd']){
  23. $msg['msg'] = 'Das eingegebene Passwort ist falsch!';
  24. $ str = json_encode ($msg);
  25. echo $str;
  26. Ausfahrt;
  27. }
  28. $msg['msg'] = 'Anmeldung erfolgreich!';
  29. $msg['status'] = 1;
  30. $ str = json_encode ($msg);
  31. echo $str;

Der obige Inhalt ist das, was der Herausgeber Ihnen über die Implementierung einer nicht aktualisierten Seite nach dem Absenden eines Formulars auf HTML-Basis vorgestellt hat. Ich hoffe, es wird Ihnen helfen!

<<:  Detaillierte Erklärung der Verwendung von overflow:auto

>>:  Detaillierter Prozess zum Upgrade von gcc (Version 10.2.0) in der CentOS7-Umgebung

Artikel empfehlen

Implementieren Sie eine MaterialUI-Button-Klickanimation auf Basis von CSS und kapseln Sie sie in eine React-Komponente ein.

Vorwort Als intensiver Benutzer von Front-End-Fra...

Zehn Erfahrungen bei der Präsentation chinesischer Webinhalte

<br /> Ich habe mich auf die drei Aspekte Te...

Beispielcode zur Implementierung sechseckiger Rahmen mit CSS3

Die äußerste BoxF dreht sich um 120 Grad, die zwe...

CentOS 7: Erläuterung zum Wechseln des Boot-Kernels und des Boot-Modus

Centos7-Switch-Boot-Kernel Hinweis: Bei Bedarf wi...

VMware 15.5-Version des grafischen Tutorials zum Erstellen eines Yum-Warehouses durch Mounten der System-CD

1. Öffnen Sie die virtuelle CentOS 7-Maschine. 2....

MySQL-Fall bei der Verwendungsbeispielanalyse

Zuerst erstellen wir die Datenbanktabelle: Tabell...

Verwenden Sie sauberes HTML-Markup zum Erstellen Ihrer Seiten

Das Internet ist ein Organismus, der sich ständig...

Einfache Schritte zur Implementierung der Autorisierung eines öffentlichen H5 WeChat-Kontos

Vorwort Gestern gab es ein Projekt, das die Imple...

CentOS7 verwendet RPM, um MySQL 5.7-Tutorialdiagramm zu installieren

1. Laden Sie 4 RPM-Pakete herunter mysql-communit...

Detaillierte Erläuterung der MySQL-Indexauswahl und -Optimierung

Inhaltsverzeichnis Indexmodell B+Baum Indexauswah...

CentOS 6 verwendet Docker, um ein Beispiel für den Betrieb einer Redis-Master-Slave-Datenbank bereitzustellen

In diesem Artikel wird beschrieben, wie Sie mit D...

Detaillierte Diskussion zum Thema mysqldump-Datenexport

1. Bei der Verwendung von mysqldump wird ein Fehl...

Probleme bei der Installation von Python3 und Pip in Ubuntu in Docker

Text 1) Laden Sie das Ubuntu-Image herunter Docke...

Webdesign-Erfahrung: Effizientes Schreiben von Webcode

Ursprünglich sollte dieses siebte Kapitel eine aus...

Ubuntu MySQL-Anmeldenamen und -Passwort anzeigen und ändern, phpmyadmin installieren

Nach der Installation von MySQL geben Sie mysql -...