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

MySQL-Triggerprinzip und Analyse von Anwendungsbeispielen

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

MySQL-Triggerprinzip und Analyse von Anwendungsbeispielen

Beispielcode für CSS-Spalten zum Erreichen eines zweiseitig ausgerichteten Layouts

Lösung für das Problem, dass die vertikale Zentrierung des Flex-Innenknopfs nicht zentriert ist

Analyse von Mysql-Datenmigrationsmethoden und -Tools

Anweisung zur Ermittlung der Browserversion und Kompatibilität mit mehreren Browsern

So verwenden Sie Bind zum Einrichten eines DNS-Servers

Welche Vorteile bietet die Verwendung von B+Tree als Index in MySQL?

Kali Linux Installation VMware Tools Installationsprozess und VM Installation vmtools button grau

Verwendung des Linux-Befehls ifconfig

Beispiel einer Methode zur Fehlerbehebung beim Lösen von Nginx-Portkonflikten

Artikel empfehlen

So debuggen Sie das Loader-Plugin in einem Webpack-Projekt

Verwendung von Vue-Filtern und benutzerdefinierten Anweisungen

3 Möglichkeiten zum Hinzufügen von Links zu HTML-Auswahl-Tags

Welche Vorteile bietet die Verwendung von // anstelle von http:// (adaptives https)?

Verbindung zum lokalen MySQL über Socket-Lösung „/tmp/mysql.sock“ nicht möglich

Lernen Sie einfach verschiedene SQL-Joins

Miniprogramm zur Implementierung der Token-Generierung und -Verifizierung

CSS imitiert Fernbedienungstasten

So übergeben Sie Parameter über CSS an JS

So deaktivieren Sie die Eslint-Erkennung in Vue (mehrere Methoden)

Detailliertes grafisches Tutorial zur Installation des Ubuntu 20.04-Dualsystems unter Windows 10

Detaillierte Erläuterung der grundlegenden Befehle des Docker-Ausführungsprozesses und des Images

Detaillierte Erläuterung der Parameteroptimierung table_open_cache und sinnvolle Konfiguration unter MySQL 5.6

MySQL-Fehler 1290 (HY000) Lösung

2 Gründe, warum die HTML-CSS-Tag-Stileinstellung nicht funktioniert