Wie oft sind Sie darauf gestoßen, dass Sie falsche Daten eingegeben haben, weshalb die Seite neu geladen und die in die Felder eingegebenen Zeichen vollständig gelöscht wurden. Um dies zu beheben, gibt es einen ziemlich beliebten Ansatz zum Erstellen einer Benutzeroberfläche, und sein Name ist Ajax. Es kommt in vielen Projekten vor und wird auf vielfältige Weise verwendet.
Senden eines Ajax-Formulars: Verbinden von Bibliotheken
Jquery-Bibliothek in index.php einschließen.
Es gibt eine andere Möglichkeit, jquery in ein Dokument einzufügen. Sie müssen die Bibliothek von der offiziellen jquery-Website herunterladen, im richtigen Ordner ablegen und den Link wie folgt einfügen:
Dokumente verbinden und einrichten
1. Erstellen Sie ein.php-Dokument im Ordner mit der Site mit einem beliebigen für Sie geeigneten Namen - dies sendet das Ajax-PHP-Formular. Darin können Sie schreiben, in welchem Format der Text mit der Nachricht angezeigt wird. Beispiel: form1.php.
2. Erstellen Sie in Ihrem Ordner mit Javascript-Dateien eine.js-Datei mitirgendein passender Name. Beispiel: form.js.
3. Verbinden Sie diesen Ordner mit Ihrem Dokument.
4. Erstellen Sie ein Formular mit den folgenden Parametern:
Vergessen Sie darin nicht, Felder für die Eingabe Ihrer Daten zu erstellen.
5. Gehen Sie zur Datei form1.php im Verzeichnis mit der Site, in die Sie schreiben:
Beim Absenden des Formulars zeigt der Browser nun Informationen zu den Daten an.
In die gleiche Datei können Sie schreiben, was genau angezeigt wird bzw. wie. Sie können hier auch Zyklen oder Algorithmen schreiben.
Senden des Ajax-Jquery-Formulars
1. In die erstellte form.js-Datei müssen Sie den Code schreiben, der dafür verantwortlich ist, dass die Datei funktioniert, nachdem die Site-Seite vollständig geladen wurde.
$(document).ready(function(){ //Unser nächster Code wird hier ausgeführt });
2. Dann müssen Sie den Senden-Button anpassen. Machen Sie alles in derselben Datei.
$("form").submit(function(event) { event.preventDefault(); //der folgende Code wird hier geschrieben });
Der erste Teil des Codes ist dafür verantwortlich, das Element auf der Seite auszuwählen, und der zweite ist dafür verantwortlich, die Standardaktion zu verhindern.
3. Senden Sie dann beispielsweise bei Erfolg ein Ajax-Formular.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Im Folgenden finden Sie detaillierte Beschreibungen der einzelnen Einstellungen.
- Typ -Dies ist die Art der Anfrage, die im Formular übermittelt wird. da es POST kostet, ist der Anfragetyp angemessen;
- this - Elementauswahl innerhalb des Konstrukts;
- attr - kurz für Anziehung (Anziehung), das heißt, ein bestimmter Parameter des ausgewählten Ziels (Form) wird angezogen;
- url - Parameter, der dafür verantwortlich ist, wohin die Anfrage gesendet wird; in diesem Fall, was in den Formularparametern steht (form1.php);
- data - gibt Formulardaten an;
- contentType - verantwortlich für das Senden von Headern an den Server; in diesem Fall wird es nicht benötigt;
- cache - verantwortlich für das Speichern des Cache des Benutzers;
- processData - verantwortlich für die Konvertierung von Daten in einen String;
- success - zeigt das Ergebnis einer erfolgreichen Datenübermittlung an; Wenn also das Senden der Daten erfolgreich war, werden die Aktionen der Funktion ausgeführt.
4. Fertig, jetzt erh alten Sie beim Absenden des Ajax-Formulars Daten, ohne die Seite zu aktualisieren.
Das Ergebnis kann mit der Datei form1.php geändert werden, in der Sie angeben können, was genau als Ergebnis angezeigt wird. Beispiel:
Sie können experimentieren und eine Kontrolle für die Korrektheit der Eingabe bestimmter Daten erstellen: Wenn die Daten nicht korrekt sind, wird die gewünschte Meldung angezeigt, andernfalls wird auf die richtige Seite weitergeleitet. Auch vieles andere ist möglich, was das Herz begehrt.
Es werden auch Daten asynchron an den Server gesendet. Dies ist, wenn der Benutzer Text eingibt, und er wird sofort rot hervorgehoben, was darauf hinweist, dass die eingegebenen Daten nicht korrekt sind. Darüberes gibt viele Anleitungen im Internet, wo alles anschaulich erklärt und mit Beispielen gezeigt wird.
Schlussfolgerung
Zweifellos ist Ajax ein nützliches Werkzeug beim Erstellen von Websites. Um qualitativ hochwertige Seiten und Schnittstellen zu erstellen, ist es einfach notwendig. Es ist erwähnenswert, dass es sehr wichtig ist, jQuery zu kennen, um das Bild und das, was im Code geschrieben ist, vollständig zu verstehen, da ein einfaches Kopieren und Einfügen nicht immer helfen und Ihnen beibringen kann, den Code zu verstehen. Denken Sie immer daran, dass die Sprachversionen aktualisiert werden und einige Funktionen einfach verschwinden können. Daher sind möglicherweise nicht alle Lösungen relevant, oft funktioniert der geschriebene Code einfach nicht oder führt nicht zu dem Ergebnis, das Sie auf Ihrem Bildschirm sehen möchten.
