Solicitud AJAX POST en jQuery

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])

1. URL es la cadena que contiene la URL a la que se enviará la solicitud.
2. 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.