Javascript Post-Anfrage Senden

| | | |

Beim Erstellen einer Web-App ist es unvermeidlich, dass wir aus den Daten eines Benutzers etwas erstellen mussen. Dies kann das Erstellen eines neuen Benutzerkontos sein, wenn jemand seine Informationen uber ein Anmeldeformular einreicht, oder das Erstellen eines neuen Rezepts mit Ihrer fantastischen neuen Rezept-Organizer-App. Um von Benutzerdaten in einem Formular zu einer neuen, neuen Instanz eines in Ihrer Datenbank gespeicherten Rezepts zu wechseln, ist eine HTTP POST-Anfrage erforderlich.

Eine POST-Anfrage wird gesendet die Daten aus dem Formular auf den Server, wo sie in einem Backend oder einer API erstellt und in einer Datenbank gespeichert werden können. Standardmäßig erfordert das Senden eines Formulars eine Umleitung oder eine Seitenaktualisierung. Obwohl dies fur kleine Apps völlig in Ordnung ist, möchten wir ein schnelleres Ladeerlebnis bieten, also werden wir dieses Verhalten uberschreiben

Die Verwendung der jQuery post()-Anfrage ermöglicht es uns, Stellen Sie die HTTP-Anfrage, erhalten Sie eine Antwort zuruck und wählen Sie aus, wie die Daten ohne Umleitung oder Aktualisierung angezeigt werden sollen! Schauen wir uns etwas genauer an, was post()zu all dem braucht.

Post() genauer unter die Lupe nehmen

HTTP-Anfragen sind wie ein Fangspiel. Der Browser sendet uber den API-Endpunkt eine Anfrage an den Server, und der Server gibt eine Antwort zuruck. Post() sendet Daten an den Endpunkt, die erstellt und in der Datenbank der App gespeichert werden.

Unter Berucksichtigung aller oben genannten Punkte können wir . annehmen post() braucht einige Argumente, oder? Rechts! post() nimmt bis zu vier Argumente an, aber fur unsere Zwecke konzentrieren wir uns auf die beiden wichtigsten: das URL-Ziel und die Daten, die wir an dieses Ziel senden.

$.post(‘/recipes’, data)

Nehmen wir unser Beispiel fur eine App zur Organisation von Rezepten, beginnen wir mit unserem jQuery-Selektor $. Durch Aufrufen der Methode post() senden wir unsere Daten an die URL von ‘/recipes.’ So weit, so gut. Wir haben einige Daten auf unseren Server geworfen. Jetzt können wir die Antwort abfangen!

Was als Antwort zu uns zuruckkommt, ist ein sogenanntes jQuery XHRObjekt oder jqXHR, das die Promise-Schnittstelle implementiert. Keine Sorge! Obwohl das Der letzte Satz mag beängstigend klingen, er sagt uns, dass die Antwort nur ein Objekt ist. Mit der praktischen done()-Methode von jQuery kann dieses Objekt in einem besser lesbaren Format organisiert werden.< br>

Bleiben Sie bei unserem Spiel von Analog dazu werfen wir Daten mit post() auf den Server. Wir erhalten ein jqXHR-Objekt zuruck, das wir an done()ubergeben, damit wir sehen können, was wir gefangen haben. Nachdem wir uns jetzt post() genau angesehen haben, sehen wir uns an, wie es verwendet wird.

jQuery post()

Zu Beginn haben wir ein einfaches HTML-Formular:

Dies zeigt das Formular als solches an:

Screen Aufnahme 2020 11 11 Um 9.42.31 Uhr 1

Wenn auf die Schaltfläche Senden geklickt wird, wird der Browser standardmäßig aktualisiert oder umgeleitet. Denken Sie daran, dass wir eine Seitenaktualisierung oder -weiterleitung vermeiden möchten? Wenn die Seite aktualisiert oder umgeleitet wird, verlieren wir alle unsere Daten aus dem Formular. Um das Umleiten und den Verlust von Daten zu vermeiden, verwenden wir die JavaScript-Methode preventDefault().

Wir warten, bis die Seite oder das Dokument geladen ist, dann lauschen und auf die Schaltfläche zum Senden im Formular mit der ID new-recipe . klicken . Dies wird mit der Methode .submit() erreicht, die eine Callback-Funktion mit dem Click-Ereignis als Argument annimmt. Zur Überprufung ist eine JavaScript-Callback-Funktion eine Funktion, die wir als Argument an eine andere später auszufuhrende Funktion ubergeben können.

In dieser Callback-Funktion können wir die Standardumleitung mit preventDefault() stoppen. Jetzt leiten wir nicht mehr weiter und können damit beginnen, einige Daten an . zu senden den Server.

Bevor wir post() aufrufen, um Daten zu senden, benötigen wir Daten! Woher bekommen wir diese Daten?
< /p>

Wir holen die Daten aus dem Formular. Da wir nicht mehr umleiten, haben wir Zugriff auf die Werte in den Texteingaben des Formulars. Was ist damit los serialize()-Methode?

Die Methode serialize()wird in dem Formular aufgerufen, das wir mit dem Schlusselwort this ausgewählt haben. Was serialize() wandelt die Formulardaten in eine Textzeichenfolge in standardmäßiger URL-codierter Notation um, die an den Server gesendet werden kann.

Sobald wir unsere Formulardaten, wir speichern es in einer Variablen:

Jetzt haben wir unsere Daten in der Variablen values ​​gespeichert und können sie jetzt an den Server senden!

Denken Sie daran, dass post() das jqXHR-Objekt? Wir können das auch als Variable speichern und darauf done()aufrufen, um die Antwort zu entpacken und auf unserer Client-Seite nach Belieben damit umzugehen.

Nachdem wir die Daten erhalten und in einer besser lesbaren Variablen von Rezept gespeichert haben, können wir auf die Namens- und Zutatenattribute zugreifen. Als Beispiel haben wir diese Attribute in einen

Eine häufige Verwendung fur post() liegt in .submit() als Callback-Funktion. Da .submit() im Formular selbst aufgerufen wird, können wir das JavaScript-Schlusselwort this verwenden, um auf alle Daten im Formular und serialize()zu verweisen serialisierte Daten in eine Variable, die oft als Werte bezeichnet wird, können wir diese Werte mit post() an unsere Ziel-URL senden.

Es ist eine gute Angewohnheit, sie zu speichern das jqXHR-Objekt, das von post()in einer Variablen, die allgemein als posting bezeichnet wird, zuruckgegeben wird. Von hier aus verwenden wir das handy done()-Methode fur unsere Posting-Variable, und jetzt haben wir Zugriff auf die Daten, mit denen der Server geantwortet hat. Es liegt nun an Ihnen, wie Sie die Daten Ihrem Benutzer anzeigen.

Nehmen Sie sich einen Moment Zeit, um Ihnen zu gratulieren uns selbst bei der Bewältigung des komplexen Prozesses von post()! Wenn Sie sich in dieser Phase der Erstellung Ihrer eigenen App befinden, denken Sie daran, dass Fehler auftreten können. Bleib ruhig und debsp;

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method