Javascript Verstuur berichtverzoek

| | | |

Als we een webapplicatie maken, is het onvermijdelijk dat we iets moeten maken van de gegevens die door de gebruiker zijn ingevoerd. Het kan het maken van een nieuw gebruikersaccount zijn wanneer iemand hun informatie indient via een registratieformulier of het maken van een nieuw recept voor uw geweldige nieuwe app voor het organiseren van recepten. Om gebruikersgegevens in een of andere vorm door te geven aan een nieuw exemplaar van een recept dat in de database is opgeslagen, is een HTTP POST-verzoek vereist.

Een POST-verzoek is wat formuliergegevens naar de server stuurt waar het wordt kan worden gemaakt in een back-end of API en worden opgeslagen in een database. Voor het verzenden van een formulier is standaard een omleiding of paginavernieuwing vereist. Hoewel dit geweldig is voor kleine applicaties, willen we een snellere laadervaring bieden, dus door dit gedrag te omzeilen

Door de jQuery post () te gebruiken, kunnen we het HTTP-verzoek doen, een antwoord en kies hoe u de gegevens allemaal wilt weergeven zonder omleiding of update! Laten we eens nader bekijken wat post () dit allemaal zou moeten doen.

Een nadere blik op post ()

HTTP-verzoeken zijn als de spel. De browser stuurt een verzoek naar de server via het API-eindpunt en de server retourneert een antwoord. Welk bericht () daadwerkelijk gegevens naar het eindpunt verzendt, wordt gemaakt en opgeslagen in de basisgegevens van de applicatie.

Rekening houdend met het bovenstaande kunnen we aannemen dat post () accepteert argumenten, toch? Wet! post () heeft maximaal vier argumenten nodig, maar voor onze doeleinden richten we ons op de twee belangrijkste: de bestemmings-URL en de gegevens die we naar die bestemming sturen.

$.post (`/recepten`, data )

Laten we het voorbeeld van onze app voor het organiseren van recepten nemen, we beginnen met onze selector jQuery $. Door de post () aan te roepen, sturen we onze gegevens naar de URL van `/recepten. So far so good. We hebben gegevens naar onze server gestuurd. Nu we bereiden ons voor om het antwoord te ontvangen!

Wat we als antwoord krijgen, is een zogenaamde jQuery XHR of jqXHR, die de Promise-interface implementeert . Maak je geen zorgen! de laatste zin klinkt misschien eng, het vertelt ons dat het antwoord slechts een object is. Met handige jQuery done () kan dit object worden georganiseerd in een beter leesbaar formaat

om door te gaan met ons spel van naar analogie, sturen we de gegevens naar de server met post () . We hebben een jqXHR geretourneerd, die we doorgeven aan done () zodat we kunnen zien wat we hebben vastgelegd. Nu we post () nader hebben bekeken, gaan we kijken hoe we het kunnen gebruiken.

jQuery post ()

Om te beginnen hebben we een eenvoudig HTML-formulier:

waarin de module als zodanig wordt weergegeven:

Screen Shot 2020 11 11 om 21.42. 31 PM 1

Vanaf deze callback-functie kunnen we de standaardomleiding stoppen met preventDefault () . Nu zijn we dat niet meer en worden we omgeleid en kunnen we beginnen met het verzenden van gegevens naar de server.

Voordat we post () datapost bellen, hebben we gegevens nodig! Waar kunnen we deze gegevens vandaan halen?

We halen de gegevens uit het formulier. Aangezien we niet langer worden omgeleid, hebben we toegang tot de waarden ‚Äã‚Äãin de tekstinvoer van het formulier. Wat is er aan de hand met deze serialize ()?

De methode serialize () wordt aangeroepen in de vorm die we hebben geselecteerd met het trefwoord this< /em>. Wat is serialize () Dit converteert de formuliergegevens naar een standaard URL-codetekstreeks die naar de server kan worden verzonden.

Zodra we onze formuliergegevens succesvol hebben geserialiseerd, kunnen we opslaan in een variabele:

Nu hebben we onze gegevens zijn opgeslagen in de waarden ‚Äã‚Äãvariabele, nu kunnen we deze naar de server sturen

Weet je nog dat post () de jqXHR retourneert? We kunnen ook opslaan als een variabele en daarop done () aanroepen om het antwoord te decomprimeren en af te handelen zoals we willen aan onze clientzijde.

Na ontvangst van de gegevens en opgeslagen in een variabele leesbaarder dan recept, we hebben toegang tot de naam en attributen van het ingrediënt. Als voorbeeld hebben we deze attributen in een

een algemeen gebruik van post () is in .submit () als een callback-functie. Aangezien .submit () in het formulier zelf wordt aangeroepen, kunnen we het JavaScript-sleutelwoord this gebruiken om naar alle gegevens in het formulier te verwijzen en serialize () . de gegevens geserialiseerd in een variabele, vaak waarden genoemd, kunnen we die waarden ‚Äã‚Äãnaar onze bestemmings-URL sturen met behulp van post ().

Het is een goede gewoonte om de jqXHR object geretourneerd door post () in een variabele die algemeen bekend staat als display. vanaf daar gebruiken we de Made scope of main () op onze display-variabele en nu hebben we toegang tot servergegevens die hebben gereageerd. nu is het aan jou hoe je de gegevens aan je gebruiker wilt laten zien.

Haal wat op. Ik lieg om je te feliciteren met het doorlopen van het complexe post ()-proces! Als u zich in dit stadium van het bouwen van uw toepassing bevindt, onthoud dan dat er fouten optreden. Blijf kalm en debug!



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