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

<!DOCTYPE HTML>
<html lang="en- US " >
<Kopf>
<meta charset= "utf-8" >
<title>Formular ohne Aktualisieren absenden</title>
<Stiltyp= "text/css" >
ul{ Listenstiltyp: keine;}
</Stil>
</Kopf>
<Text>
<iframe name= "formsubmit" style= "anzeige:keine;" >
</iframe>
<Formularaktion = "form.php" Methode = "POST" Name = "formphp" Ziel = "formsubmit" >
<ul>
<li>
<label for = "uname" >Benutzername: </label>
<Eingabetyp= "Text" Name= "uname" ID= "uname" />
</li>
<li>
<label for = "pwd" >Passwort:</label>
<input type= "Passwort" name= "pwd" id= "pwd" />
</li>
<li>
<input type= "submit" value= "Anmelden" />
</li>
</ul>
</form>
</body>
</html>
(PHP-Seite: form.php)
<?php
// Nicht-Leer-Verifizierung
wenn (leer($_POST[ 'uname' ]) || leer($_POST[ 'pwd' ]))
{
echo '<script type="text/javascript">alert("Benutzername oder Passwort ist leer!");</script>' ;
Ausfahrt;
}
//Passwort bestätigen
wenn ($_POST[ 'uname' ] != 'jack' || $_POST[ 'pwd' ] != '123456' )
{
echo '<script type="text/javascript">alert("Falscher Benutzername oder Passwort!");</script>' ;
Ausfahrt;
} anders {
echo '<script type="text/javascript">alert("Anmeldung erfolgreich!");</script>' ;
Ausfahrt;
}

Zweiter Typ:
(HTML-Seite)

HTML- CodeInhalt in die Zwischenablage kopieren

<!DOCTYPE HTML>
<html lang="en- US " >
<Kopf>
<meta charset= "utf-8" >
<title>Iframe-Übermittlungsformular</title>
</Kopf>
<Text>
<iframe name= "meiniframe" style= "anzeige:keine;" onload= "iframeLoad(dies);" ></iframe>
<Formularaktion = "form.php" Ziel = "myiframe" Methode = "POST" >
Benutzername:<input type= "text" name= "username" /><br/>
Passwort:<input type= "password" name= "userpwd" /><br/>
<input type= "submit" value= "Anmelden" />
</form>
<Skripttyp = "Text/Javascript" >
Funktion iframeLoad(iframe){
var doc = iframe.contentWindow.document;
var html = doc.body.innerHTML;
wenn (html != '' ){
//Konvertiere die erhaltenen JSON-Daten in ein JSON-Objekt
var obj = eval( "(" +html+ ")" );
//Beurteilen Sie den zurückgegebenen Status
wenn (Objektstatus < 1){
Alarm (Objekt.Nachricht);
} anders {
Alarm (Objekt.Nachricht);
window.location.href = "http://www.baidu.com" ;
}
}
}
</Skript>
</body>
</html>

(PHP-Seite: form.php)

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<? php
//Stellen Sie die Zeitzone ein
date_default_timezone_set('VRC');
/*
Zurückgegebene Commit-Nachricht
Status: Status
msg: Sofortnachricht
*/
$ msg = Array ('status' = > 0, 'msg' = > '');
//Die übermittelten Daten abrufen
$ name = $_POST['Benutzername'];
$ pwd = $_POST['Benutzerpwd'];
//Anmeldeüberprüfung simulieren
$ Benutzer = Array ();
$Benutzer['name'] = 'jack';
$user['pwd'] = 'jack2014';
wenn($name != $user['name']){
$msg['msg'] = 'Der Benutzer ist nicht registriert!';
$ str = json_encode ($msg);
echo $str;
Ausfahrt;
}sonst wenn($pwd != $user['pwd']){
$msg['msg'] = 'Das eingegebene Passwort ist falsch!';
$ str = json_encode ($msg);
echo $str;
Ausfahrt;
}
$msg['msg'] = 'Anmeldung erfolgreich!';
$msg['status'] = 1;
$ str = json_encode ($msg);
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

Beispielanalyse für MySQL Oracle- und SQL Server-Paging-Abfragen

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

Beispielanalyse für MySQL Oracle- und SQL Server-Paging-Abfragen

Detaillierte Erklärung der Props-Konfiguration von Vue

Das Miniprogramm implementiert nativ das linksseitige Schubladenmenü

Eine kurze Erläuterung, wann MySQL interne temporäre Tabellen verwendet

Einführung in die Verwendung des Daten-URI-Schemas zum Einbetten von Bildern in Webseiten

Ubuntu 19.10 aktiviert SSH-Dienst (detaillierter Prozess)

Praktisches Tutorial zum Ändern des MySQL-Zeichensatzes

Wenn ich eine Eigenschaft in Vue-Daten zufällig ändere, wird die Ansicht aktualisiert?

Was ich beim Aufbau meines eigenen Blogs gelernt habe

So wählen Sie den richtigen MySQL-Datums-/Uhrzeittyp zum Speichern Ihrer Zeit

Artikel empfehlen

Beheben von Problemen mit impliziter MySQL-Konvertierung

So verwenden Sie die Vue-Timeline-Komponente

Verwendung der JavaScript-Sleep-Funktion

Detaillierte Erklärung des MySQL-Datenbank-LIKE-Operators in Python

Drei Möglichkeiten zum Weiterleiten des Linux-SSH-Ports

Vergleichende Analyse von MySQL Binlog-Protokollverarbeitungstools

So konfigurieren Sie den Tomcat-Server für Eclipse und IDEA

So bedienen Sie Datei- und Ordnerberechtigungen unter Linux

Vue implementiert ein Suchfeld mit einer Lupe

Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server

Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen

Detaillierte Erläuterung der allgemeinen Verwendungsmethoden von weixin-js-sdk in vue

Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js

CSS-Code zum Erreichen eines Hintergrundverlaufs und automatischen Vollbilds