Javascript Invia Richiesta Di Posta

| | | |

Quando creiamo un’app Web, è inevitabile che dovremo creare qualcosa dai dati inseriti dall’utente. Potrebbe essere la creazione di un nuovo account utente quando qualcuno invia le proprie informazioni tramite un modulo di registrazione o la creazione di una nuova ricetta dalla tua fantastica nuova app per l’organizzatore di ricette. Passare dai dati utente in un modulo a una nuova istanza di una ricetta salvata nel database richiede una richiesta HTTP POST.

Una richiesta POST è ciò che invia i dati dal modulo al server dove possono essere creati in un backend o API e salvati in un database. Per impostazione predefinita, l’invio di un modulo richiede un reindirizzamento o un aggiornamento della pagina. Anche se questo è perfetto per le piccole app, vogliamo fornire un’esperienza di caricamento più rapida in modo da sovrascrivere questo comportamento

L’utilizzo della richiesta jQuery post() ci consente di fai la richiesta HTTP, ricevi una risposta e scegli come visualizzare i dati tutti senza un reindirizzamento o un aggiornamento! Diamo un’occhiata un po’ più da vicino a ciò di cui post()ha bisogno per fare tutto questo.

Uno sguardo più da vicino a post()

Le richieste HTTP sono come un gioco d’azzardo. Il browser invia una richiesta al server tramite l’endpoint API e il server restituisce una risposta. Ciò che fa post() è inviare i dati all’endpoint che verrà creato e salvato nel database dell’app.

Prendendo in considerazione tutto quanto sopra, possiamo assumere post() accetta alcuni argomenti, giusto? Destra! post() richiede fino a quattro argomenti, ma per i nostri scopi ci concentriamo sui due principali: la destinazione dell’URL e i dati che stiamo inviando a quella destinazione.

$.post(‘/recipes’, data)

Prendendo l’esempio della nostra app per l’organizzazione delle ricette, iniziamo con il nostro selettore jQuery $. Invocando il metodo post(), inviamo i nostri dati all’URL di ‚Äò/recipes.‚Äô Finora, tutto bene. Abbiamo inviato alcuni dati al nostro server. Ora ci prepariamo a ricevere la risposta!

Ciò che ci viene restituito come risposta è ciò che è noto come oggettojQuery XHR, o jqXHR, che implementa l’interfaccia Promise. Non preoccuparti! l’ultima frase può sembrare spaventosa, ci sta dicendo che la risposta è solo un oggetto. Con il pratico metodo done() di jQuery, quell’oggetto può essere organizzato in un formato più leggibile.< br>

Continuare con il nostro gioco di per analogia, inviamo i dati al server con post(). Ci viene restituito un oggetto jqXHR, che passiamo a done() cosi possiamo vedere cosa abbiamo catturato. Ora che abbiamo esaminato da vicino post(), vediamo come usarlo.

jQuery post()

Per iniziare, abbiamo un semplice modulo HTML:

Che visualizza il modulo come tale:

Schermo Scatto 2020 11 11 alle 9.42.31 PM 1

Per impostazione predefinita, quando si fa clic su un pulsante invia, il browser si aggiornerà o reindirizzerà. Ricordi che vogliamo evitare un aggiornamento o un reindirizzamento della pagina? Se la pagina si aggiorna o reindirizza, perdiamo tutti i nostri dati dal modulo. Per evitare il reindirizzamento e la perdita di dati, abbiamo il metodo JavaScript preventDefault().

Stiamo aspettando il caricamento della pagina o del documento, quindi in ascolto, quindi viene fatto clic sul pulsante di invio sul modulo con un id di new-recipe . Ciò si ottiene con il metodo .submit() che accetta una funzione di callback con l’evento click come argomento. Per rivedere, una funzione di callback JavaScript è una funzione che possiamo passare come argomento a un’altra funzione da eseguire in seguito.

Dall’interno di questa funzione di callback, possiamo interrompere il reindirizzamento predefinito con preventDefault(). Ora non stiamo più reindirizzando e possiamo iniziare a inviare alcuni dati a il server.

Prima di invocare post() per inviare i dati, abbiamo bisogno di dati! Da dove otteniamo questi dati?
< /p>

Otteniamo i dati dal modulo. Poiché non stiamo più reindirizzando, abbiamo accesso ai valori negli input di testo del modulo. Cosa sta succedendo con quel serialize()?

Il metodo serialize()è chiamato nel form che abbiamo selezionato con la parola chiave this. Cosa serialize() non fa altro che convertire i dati del modulo in una stringa di testo in notazione codificata URL standard, che può essere inviata al server.

Una volta che abbiamo serializzato correttamente il nostro dati del modulo, lo memorizziamo in una variabile:

Ora abbiamo i nostri dati memorizzati nella variabile values, ora possiamo inviarli al server!

Ricorda che post() restituisce il jqXHR oggetto? Possiamo salvare anche questo come variabile e chiamare done() su di esso per decomprimere la risposta e gestirla come scegliamo dal nostro lato client.

Dopo aver ricevuto i dati e archiviati in una variabile più leggibile di ricetta, possiamo accedere al nome e agli attributi dell’ingrediente. A titolo di esempio, abbiamo inserito questi attributi in un

Un uso comune di post() è all’interno di .submit() come funzione di callback. Poiché .submit() viene chiamato nel form stesso, possiamo usare la parola chiave JavaScript this per fare riferimento a tutti i dati nel form e serialize(). dati serializzati in una variabile, spesso chiamata valori, possiamo inviare questi valori al nostro URL di destinazione utilizzando post().

è una buona abitudine memorizzare l’oggetto jqXHR restituito da post()in una variabile comunemente chiamata posting. Da qui usiamo l’handy done() sulla nostra variabile di invio e ora abbiamo accesso ai dati con cui il server ha risposto. Ora sta a te decidere come mostrare i dati al tuo utente.

Prenditi un momento per congratularmi con te tu stesso nell’affrontare il complesso processo di post()! Se sei in questa fase della creazione della tua app, ricorda che si verificano errori. Stai calmo ed esegui il 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