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

Detaillierte Erklärung des durch einen Schrägstrich / verursachten Mordes in Nginx proxy_pass

Hintergrund Ein Nginx-Servermodul muss als Proxy ...

html ein Link-Tag Titel Attribut Zeilenumbruch Mouseover Prompt Inhalt Zeilenumbruch Effekt

Die Methode zum Umbrechen des Inhalts (Titelattrib...

MySQL-Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDIFF), Funktionen zur Berechnung von Datumsumrechnungen (date_add, day, date_format, str_to_date)

1. Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDI...

So konfigurieren Sie Openbox für den Linux-Desktop (empfohlen)

Dieser Artikel ist Teil einer Sonderserie zu den ...

Docker führt einen Befehl in einem Container außerhalb des Containers aus

Manchmal möchten wir einen Befehl in einem Contai...

Ein tiefes Verständnis der spitzen Klammern in Bash (für Anfänger)

Vorwort Bash verfügt über viele wichtige integrie...

Detaillierte Erläuterung der Prinzipien und Anwendungsbeispiele von MySQL-Joinabfragen, Union-Abfragen und Unterabfragen

Dieser Artikel veranschaulicht anhand von Beispie...

Beispiel einer Vorrendering-Methode für eine Vue-Einzelseitenanwendung

Inhaltsverzeichnis Vorwort vue-cli 2.0 Version vu...

Zusammenfassung der Erfahrungen und Fähigkeiten im Webdesign

■ Planung des Website-Themas Achten Sie darauf, da...

Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)

HTML-Funktionsprinzip: 1. Lokaler Vorgang: Öffnen...

Nginx kompiliert nginx - neues Modul hinzufügen

1. Vorhandene Module anzeigen /usr/local/nginx/sb...

Wie können wir für Jiedaibao werben, damit sich jeder anmeldet? Methoden und Fähigkeiten zur Förderung von Jiedaibao

Jiedaibao ist eine Softwareplattform für Handykre...

Detaillierte Erläuterung des Falls der dynamischen Tabellengenerierung mit JavaScript

Inhaltsverzeichnis Vorwort Umsetzungsideen Implem...

Die Vue-Konfigurationsdatei generiert automatisch Routing- und Menüinstanzcode

Inhaltsverzeichnis Vorne geschrieben router.json ...

Wie löst Vue das domänenübergreifende Problem des Axios-Request-Frontends?

Inhaltsverzeichnis Vorwort 1. Warum treten domäne...