Javascript Enviar Solicitud De Publicación

| | | |

Al crear una aplicaciòn web, es inevitable que tengamos que crear algo a partir de los datos que ingresa un usuario. Esto podrìa ser la creaciòn de una nueva cuenta de usuario cuando alguien envìa su informaciòn a través de un formulario de registro o la creaciòn de una nueva receta desde su increìble aplicaciòn organizadora de recetas. & Nbsp; Pasar de los datos del usuario en un formulario a una nueva instancia de una receta guardada en su base de datos requiere una solicitud HTTP POST. & Nbsp;

Una solicitud POST es lo que envìa los datos del formulario al servidor donde se pueden crear en un backend o API y guardar en una base de datos. De forma predeterminada, enviar un formulario requiere una redirecciòn o una actualizaciòn de la página. Si bien esto está perfectamente bien para aplicaciones peque√±as, queremos brindar una experiencia de carga más rápida, por lo que anularemos este comportamiento.

El uso de la solicitud jQuery post () nos permite haga la solicitud HTTP, obtenga una respuesta y elija còmo mostramos los datos, ¬°todo sin una redirecciòn o actualizaciòn! Veamos un poco más de cerca lo que post () necesita para hacer todo esto. & Nbsp;

Un análisis más detallado de post ()

Las solicitudes HTTP son como un juego de trampas. El navegador envìa una solicitud al servidor a través del punto final de la API y el servidor devuelve una respuesta. Lo que hace post () es enviar datos al punto final que se creará y guardará en la base de datos de la aplicaciòn. & Nbsp;

Teniendo en cuenta todo lo anterior, podemos asumir post () toma algunos argumentos, ¿verdad? ¬°Derecha! post () toma hasta cuatro argumentos, pero para nuestros propòsitos, nos enfocamos en los dos principales: el destino de la URL y los datos que estamos enviando a ese destino. & nbsp;

$ .post (" / recetas & rsquo ;, datos) & nbsp;

Tomando el ejemplo de nuestra aplicaciòn de organizaciòn de recetas, comenzamos con nuestro selector jQuery $. Al invocar el método post (), estamos enviando nuestros datos a la URL de " /recipes.‚Äô Hasta ahora, todo bien. Hemos enviado algunos datos a nuestro servidor. ¬°Ahora, nos preparamos para recibir la respuesta! & nbsp;

Lo que nos llega como respuesta es lo que se conoce como un objeto jQuery XHR, o jqXHR, que implementa la interfaz Promise. ¬°No te preocupes! La √∫ltima oraciòn puede sonar aterradora, nos dice que la respuesta es solo un objeto. Con el práctico método done () de jQuery, & nbsp; ese objeto se puede organizar en un formato más legible. < br>

Continuando con nuestro juego de captura la analogìa, arrojamos datos al servidor con post (). Nos devuelven un objeto jqXHR, que pasamos a done () para que podamos ver lo que capturamos. Ahora que hemos examinado de cerca post (), veamos còmo usarlo. & Nbsp;

jQuery post ()

Para empezar, tenemos un formulario HTML simple:

Que muestra el formulario como tal:

Pantalla Disparo 2020 11 11 A las 9.42.31 p.m. 1

De forma predeterminada, cuando se hace clic en un botòn enviar, el navegador se actualizará o redireccionará. ¿Recuerda que queremos evitar que la página se actualice o se redireccione? Si la página se actualiza o redirecciona, perdemos todos nuestros datos del formulario. Para evitar redireccionar y perder datos, tenemos el método JavaScript preventDefault ().

Estamos esperando hasta que se cargue la página o documento, luego escuchamos y luego se hace clic en el botòn de enviar en el formulario con una identificaciòn de nueva-receta . Esto se logra con el método .submit () que toma una funciòn de devoluciòn de llamada con el evento click como argumento. Para revisar, una funciòn de devoluciòn de llamada de JavaScript es una funciòn que podemos pasar como argumento a otra funciòn para que se ejecute más tarde.

Desde dentro de esta funciòn de devoluciòn de llamada, podemos detener la redirecciòn predeterminada con preventDefault (). Ahora, ya no estamos redireccionando y podemos comenzar a enviar algunos datos a el servidor. & nbsp;

Antes de invocar post () para enviar datos, necesitamos datos. ¿De dònde obtenemos estos datos? & nbsp;

Obtenemos los datos del formulario. Como ya no estamos redireccionando, tenemos acceso a los valores en las entradas de texto del formulario. ¿Qué está pasando con ese serialize () método?

El método serialize () se llama en el formulario que hemos seleccionado con la palabra clave this. serialize () es convertir los datos del formulario en una cadena de texto en notaciòn estándar codificada en URL, que se puede enviar al servidor. & nbsp;

Una vez que hayamos serializado correctamente nuestro datos de formulario, lo almacenamos en una variable: & nbsp;

Ahora tenemos nuestros datos almacenados en la variable de valores, ¬°ahora podemos enviarlos al servidor!

Recuerde que post () devuelve el < còdigo> objeto jqXHR? También podemos guardar eso como una variable y llamar a done () para descomprimir la respuesta y tratar con ella como elijamos en nuestro lado del cliente.

Luego de recibir los datos y almacenarlos en una variable más legible de receta, podemos acceder a los atributos de nombre y ingrediente. Por ejemplo, insertamos estos atributos en un "div" con una clase de recetas.

 Captura de pantalla 2020 11 11 a las 22.10.38 p. m.

Conclusiòn

¬°Hemos cubierto mucho terreno aquì! Antes de celebrar el aprendizaje sobre post (), recapitulemos rápidamente lo que hemos aprendido. & Nbsp;

Un uso com√∫n de post () está dentro de .submit () como una funciòn de devoluciòn de llamada. Desde .submit () en el formulario en sì, podemos usar la palabra clave JavaScript this para hacer referencia a todos los datos en el formulario y serialize (). datos serializados en una variable, a menudo llamados valores, podemos enviar estos valores a nuestra URL de destino usando post (). & nbsp;

Es un buen hábito almacenar el objeto jqXHR devuelto por post () en una variable com√∫nmente llamada publicaciòn. Desde aquì usamos el handy done () en nuestra variable de publicaciòn, y ahora tenemos acceso a los datos con los que el servidor respondiò. Ahora depende de usted còmo mostrar los datos a su usuario. & nbsp;

Tòmate un momento para felicitarte nosotros mismos al abordar el complejo proceso de post ()! Si se encuentra en esta etapa de la creaciòn de su propia aplicaciòn, recuerde que se producen errores. ¬°Mantenga la calma y depure! & Nbsp;

Javascript Enviar Solicitud De Publicación exp: Questions

Javascript Enviar Solicitud De Publicación JavaScript: Questions

Shop

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

$

Best laptop for Zoom

$499

Best laptop for Minecraft

$590

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

News

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