Solicitud AJAX POST en jQuery
![Solicitud AJAX POST en jQuery](/img/jQuery/ag-feature-image---ajax-post-jquery.webp)
La publicación de hoy enseñará sobre las solicitudes POST
de AJAX en jQuery.
Solicitud POST
de AJAX en jQuery
La solicitud AJAX POST
de jQuery realiza una solicitud HTTP asíncrona (AJAX).
Sintaxis:
jQuery.ajax(url[, settings])
jQuery.ajax([settings])
URL
es la cadena que contiene la URL a la que se enviará la solicitud.settings
son los objetos de par clave/valor que configuran la solicitud AJAX. Todos los ajustes son opcionales. Se puede establecer un valor predeterminado para cada opción con$.ajaxSetup()
.
La función $.ajax()
subyace en todas las solicitudes AJAX enviadas a través de jQuery. A menudo es inútil llamar a esta característica a la vez, ya que hay numerosas opciones de alto nivel como $.Get()
y .load()
disponibles y más sencillas de aplicar.
Se requieren opciones comunes si es mucho menor, aunque $.ajax()
se puede usar de manera más flexible.
El objeto jQuery XMLHttpRequest
(jqXHR
) devuelto a través de $.ajax()
a partir de jQuery 1.5 es un superconjunto del elemento XMLHttpRequest
local del navegador. Por ejemplo, contiene casas responseText
y responseXML
, así como una técnica getResponseHeader()
.
Si bien el mecanismo de entrega es algo aparte de XMLHttpRequest
(por ejemplo, una etiqueta de secuencia de comandos para una solicitud JSONP
), el elemento jqXHR
simula la capacidad XHR nativa cuando es factible.
A partir de jQuery 1.5.1, el objeto jqXHR
también lleva el método overrideMimeType()
(también cambió en jQuery 1.4.X, pero se eliminó brevemente en jQuery 1.5). Por ejemplo, la técnica .overrideMimeType()
se puede utilizar dentro de la función de devolución de llamada beforeSend()
para cambiar el encabezado de tipo de contenido de la respuesta.
Las distintas respuestas a las llamadas $.Ajax()
están sujetas a tipos específicos de preprocesamiento antes de ser entregadas al controlador de éxito. Los tipos de información disponibles son text
, HTML
, XML
, JSON
, JSONP
y script
.
La opción de datos puede enviar los datos en una cadena de consulta de la forma clave1=valor1&clave2=valor2
o un objeto de la forma {clave1: 'valor1', clave2: 'valor2'}
.
Debido a las restricciones de seguridad del navegador, la mayoría de las solicitudes de AJAX están sujetas a la cobertura del mismo origen; la solicitud no puede recuperar eficazmente datos de un dominio, subdominio, puerto o protocolo diferente.
Encuentre más información en la documentación de .ajax()
.
Entendámoslo con el siguiente ejemplo. Los siguientes códigos no se pueden ejecutar tal cual y no tienen salida.
Debe agregarse al código existente para ver los resultados.
<form id="myForm">
<label for="name">Name</label>
<input id="name" name="name" type="text" value="Smith" />
<input type="submit" value="Send" />
</form>
$('#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
method: 'POST',
url: '/open/hello-world',
data: {name: 'Smith', location: 'Doe'}
}).done(function(msg) {
alert('Data Saved: ' + msg);
});
})
Una vez que el usuario envía el formulario del ejemplo anterior, se envía una llamada AJAX al servidor con la URL y los parámetros especificados. Cuando el servidor regresa con un mensaje exitoso, puede imprimir el mensaje en la consola o notificar al usuario con el mensaje apropiado.
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn