Formular ohne Seiten aktualisieren - Php/JQuery

Bei der Übermittlung eines Formulars erwarten Benutzer eine nahtlose Benutzererfahrung. Selbst die kleinste Störung des Browsing -Erlebnisses kann zu einem Rückgang der Konversionsrate führen. Angenommen, Ihre Website hat mehrere kleine Formulare, bei denen Benutzer persönliche Daten, Adressen und andere vertrauliche Informationen eingeben müssen. In diesem Fall müssen Sie die Implementierung der AJAX -Validierung und Autosave -Funktionen in Betracht ziehen, um das Risiko zu verringern, dass Benutzer ihre Daten verlieren.

In diesem Blog -Beitrag werden Sie beigebracht. Sie können auch Autosave-Funktionen für Ihre Website-Besucher implementieren und Beispiele dafür sehen, wie Best Practices in realen Szenarien implementiert werden können. Lass uns anfangen!

1. Hauptwebseite

Erstellen und Index.html Datei auf Ihrer Website mit den folgenden Inhalten. Dies ist das Hauptformular für HTML, das auf der Website -Seite angezeigt wird. Sie können einfach ein Formular in jede Website -Seite integrieren.

 Formular ohne Seiten aktualisieren - Php/JQuery - Tecadmin.Netzname: 
 Email: 
 Telefon-Nr:
 Geschlecht Männlich Weiblich
   
 Ihre Daten werden unten angezeigt .. 
 ===================================
      

2. JavaScript erstellen

Erstellen Sie nun eine JavaScript -Seite mit Namen einreichen.JS innen JS Verzeichnis mit den folgenden Inhalten. Sie können dieses JavaScript optimieren, indem Sie die jQuery -Validierungen hinzufügen.

Funktion endenFormData () var name = $ ("#name").val (); var E -Mail = $ ("#E -Mail").val (); var Telefon = $ ("#Telefon").val (); var Gender = $ ("Eingabe [Typ = Radio]: geprüft").val (); $.Post ("Senden.PHP ", Name: Name, E -Mail: E -Mail, Telefon: Telefon, Geschlecht: Geschlecht, Funktion (Daten) $ ('#Ergebnisse').HTML (Daten); $ ('#myForm') [0].zurücksetzen(); );  

3. Erstellen Sie PHP -Skript

Erstellen Sie nun ein PHP -Skript mit dem Namen einreichen.Php. Dieses Skript wird alle Ihre unterstützten Operationen ausführen. Wenn wir das Webformular einreichen, erhält dieses Skript alle Argumente aus dem Beitrag. Sie können dieses Skript nach Ihren Anforderungen anpassen, z. B. das Speichern von Werten in der Datenbank, E -Mail -Datensätze an Administrator usw.

"; echo $ _post ['E -Mail'] ."
"; echo $ _post ['Telefon'] ."
"; echo $ _post ['Geschlecht'] ."
"; echo "==============================
"; echo" alle Daten erfolgreich übermittelt!"; ?> 

4. Testen

Jetzt Zugang Index.html Seite im Webbrowser und testen Sie dieses Beispiel. Sie können diese Demo auch anzeigen.

Abschluss

AJAX -Formulare sind ein wesentlicher Bestandteil der modernen Entwicklung von Webanwendungen und können verwendet werden, um die Benutzererfahrung zu verbessern, indem die Zeit für die Übermittlung von Daten verringert wird. Die Technologie hinter Ajax Forms hat sich in den letzten Jahren erheblich entwickelt, insbesondere mit dem Aufkommen leistungsstärkerer JavaScript -Frameworks, die zusätzliche Funktionalität und Benutzerfreundlichkeit bieten. Es ist wichtig zu beachten, dass die Vorteile der Verwendung eines Ajax -Formulars nicht auf Websites beschränkt sind. Tatsächlich können dieselben Konzepte angewendet werden, um eine mobile App mit einer reaktionsschnellen Benutzeroberfläche zu erstellen. Aus diesem Grund ist es wichtig, die Grundlagen des Erstellens einer Ajax -Form und die damit verbundenen Vorteile zu verstehen.