jQuery
Ajax

Sintaxis

• var jqXHR = $ .ajax (url [, configuración])
• var jqXHR = $ .ajax ([configuración])
• jqXHR.done (función (data, textStatus, jqXHR) {});
• jqXHR.fail (función (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (function (jqXHR) {});

Parámetros

Observaciones

Manejo de códigos de respuesta HTTP con $ .ajax ()

Además de .done , .fail y. .always prometen devoluciones de llamada, que se activan en función de si la solicitud fue exitosa o no, existe la opción de activar una función cuando se devuelve un Código de Estado HTTP específico desde el servidor. Esto se puede hacer usando el parámetro statusCode .

$.ajax({
    type: {POST or GET or PUT etc.},
    url:  {server.url},
    data: {someData: true},
    statusCode: {
        404: function(responseObject, textStatus, jqXHR) {
            // No content found (404)
            // This code will be executed if the server returns a 404 response
        },
        503: function(responseObject, textStatus, errorThrown) {
            // Service Unavailable (503)
            // This code will be executed if the server returns a 503 response
        }           
    }
})
.done(function(data){
    alert(data);
})
.fail(function(jqXHR, textStatus){
    alert('Something went wrong: ' + textStatus);
})
.always(function(jqXHR, textStatus) {
   alert('Ajax request was finished')
});

Como indica la documentación oficial de jQuery:

Si la solicitud es exitosa, las funciones del código de estado toman los mismos parámetros que la devolución de llamada exitosa; si da como resultado un error (incluida la redirección 3xx), toman los mismos parámetros que la devolución de llamada de error .

Uso de Ajax para enviar un formulario

A veces puede tener un formulario y desea enviarlo utilizando ajax.

Supongamos que tiene esta forma simple -

<form id="ajax_form" action="form_action.php">
  <label for="name">Name :</label>
  <input name="name" id="name" type="text" />
  <label for="name">Email :</label>
  <input name="email" id="email" type="text" />
  <input type="submit" value="Submit" />
</form>

Se puede usar el siguiente código jQuery (dentro de $(document).ready call) -

$('#ajax_form').submit(function(event){
  event.preventDefault();
  var $form = $(this);

  $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function(data) {
        // Do something with the response
      },
      error: function(error) {
        // Do something with the error
      }
  });
});

Explicación

• var $form = $(this) - el formulario, almacenado en caché para su reutilización
• $('#ajax_form').submit(function(event){ - Cuando se envía el formulario con ID "ajax_form", ejecute esta función y pase el evento como parámetro.
• event.preventDefault(); - Evita que el formulario se envíe normalmente (Alternativamente, podemos usar return false después del ajax({}); declaración, que tendrá el mismo efecto)
• url: $form.attr('action'), - Obtenga el valor del atributo "acción" del formulario y utilícelo para la propiedad "url".
• data: $form.serialize(), - Convierte las entradas dentro del formulario en una cadena adecuada para enviar al servidor. En este caso, devolverá algo como "name=Bob&[email protected]"

Enviando datos JSON

jQuery hace que el manejo de las respuestas jSON sea indoloro, pero se requiere un poco más de trabajo cuando una solicitud determinada desea enviar datos en formato JSON:

 $.ajax("/json-consuming-route", {
      data: JSON.stringify({author: {name: "Bullwinkle J. Moose", 
                                     email: "[email protected]"} }),
      method: "POST",
      contentType: "application/json"
   });

Observe que estamos especificando el tipo de contentType correcto para los datos que estamos enviando; esta es una buena práctica en general y puede ser requerida por la API a la que está publicando, pero también tiene el efecto secundario de indicar a jQuery que no realice la conversión predeterminada de %20 a + , lo que haría si contentType fuera se deja en el valor predeterminado de application/x-www-form-urlencoded . Si, por algún motivo, debe dejar contentType configurado en el valor predeterminado, asegúrese de establecer processData en false para evitarlo.

La llamada a JSON.stringify podría evitarse aquí, pero su uso nos permite proporcionar los datos en forma de un objeto de JavaScript (evitando así los vergonzosos errores de sintaxis de JSON, como no citar nombres de propiedades).

Todo en uno ejemplos

Ajax consigue:

Solución 1:

$.get('url.html', function(data){
    $('#update-box').html(data);
});

Solución 2:

 $.ajax({
     type: 'GET',
     url: 'url.php',  
 }).done(function(data){
     $('#update-box').html(data);
 }).fail(function(jqXHR, textStatus){
     alert('Error occured: ' + textStatus);
 });

Ajax Load: otro método ajax get creado para simplcity

$('#update-box').load('url.html');

.load también puede ser llamado con datos adicionales. La parte de datos se puede proporcionar como cadena u objeto.

$('#update-box').load('url.php', {data: "something"});
$('#update-box').load('url.php', "data=something");

Si se llama a .load con un método de devolución de llamada, la solicitud al servidor será una publicación

$('#update-box').load('url.php', {data: "something"}, function(resolve){
    //do something
});

Ajax Post:

Solución 1:

$.post('url.php', 
    {date1Name: data1Value, date2Name: data2Value},  //data to be posted
    function(data){
        $('#update-box').html(data);
    }
);

Solución 2:

$.ajax({
    type: 'Post',
    url: 'url.php',  
    data: {date1Name: data1Value, date2Name: data2Value}  //data to be posted
}).done(function(data){
    $('#update-box').html(data);
}).fail(function(jqXHR, textStatus){
    alert('Error occured: ' + textStatus);
});

Ajax Post JSON:

var postData = {
    Name: name,
    Address: address,
    Phone: phone
};

$.ajax({
     type: "POST",
     url: "url.php",
     dataType: "json",
     data: JSON.stringfy(postData),
     success: function (data) {
         //here variable data is in JSON format
     }
 });

Ajax Get JSON:

Solución 1:

$.getJSON('url.php', function(data){
    //here variable data is in JSON format
});

Solución 2:

 $.ajax({
      type: "Get",
      url: "url.php",
      dataType: "json",
      data: JSON.stringfy(postData),
      success: function (data) {
          //here variable data is in JSON format
      },    
      error: function(jqXHR, textStatus){
          alert('Error occured: ' + textStatus);
      }
  });

Ajax abortar una llamada o solicitud

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

// mata la solicitud

xhr.abort()

Archivos Ajax

1. Un ejemplo simple completo

Podríamos usar este código de muestra para cargar los archivos seleccionados por el usuario cada vez que se realiza una nueva selección de archivos.

<input type="file" id="file-input" multiple>

var files;
var fdata = new FormData();
$("#file-input").on("change", function (e) {
    files = this.files;

    $.each(files, function (i, file) {
        fdata.append("file" + i, file);
    });

    fdata.append("FullName", "John Doe");
    fdata.append("Gender", "Male");
    fdata.append("Age", "24");

    $.ajax({
        url: "/Test/Url",
        type: "post",
        data: fdata, //add the FormData object to the data parameter
        processData: false, //tell jquery not to process data
        contentType: false, //tell jquery not to set content-type
        success: function (response, status, jqxhr) {
            //handle success
        },
        error: function (jqxhr, status, errorMessage) {
            //handle error
        }
    });
});

Ahora vamos a desglosarlo e inspeccionarlo parte por parte.

2. Trabajar con entradas de archivos

Este documento MDN (Uso de archivos de aplicaciones web) es una buena lectura acerca de varios métodos sobre cómo manejar las entradas de archivos. Algunos de estos métodos también se utilizarán en este ejemplo.

Antes de que subamos los archivos, primero tenemos que darle al usuario una manera de seleccionar los archivos que desea cargar. Para ello utilizaremos un file input . La propiedad multiple permite seleccionar más de un archivo, puede eliminarlo si desea que el usuario seleccione un archivo a la vez.

<input type="file" id="file-input" multiple>

Vamos a utilizar el change event de entrada para capturar los archivos.

var files;
$("#file-input").on("change", function(e){
    files = this.files;
});

Dentro de la función de controlador, accedemos a los archivos a través de la propiedad de archivos de nuestra entrada. Esto nos da una Lista de archivos , que es un objeto similar a una matriz.

3. Creando y llenando los datos de formulario

Para cargar archivos con Ajax vamos a utilizar FormData .

var fdata = new FormData();

FileList que obtuvimos en el paso anterior es una matriz similar a un objeto y se puede iterar usando varios métodos, incluyendo for loop , for ... of loop y jQuery.each . Nos quedaremos con el jQuery en este ejemplo.

$.each(files, function(i, file) {
  //...
});

Utilizaremos el método de adición de FormData para agregar los archivos a nuestro objeto formdata.

$.each(files, function(i, file) {
  fdata.append("file" + i, file);
});

También podemos agregar otros datos que queremos enviar de la misma manera. Digamos que queremos enviar alguna información personal que hemos recibido del usuario junto con los archivos. Podríamos agregar esta información a nuestro objeto formdata.

fdata.append("FullName", "John Doe");
fdata.append("Gender", "Male");
fdata.append("Age", "24");
//...

4. Enviando los archivos con Ajax

$.ajax({
    url: "/Test/Url",
    type: "post",
    data: fdata, //add the FormData object to the data parameter
    processData: false, //tell jquery not to process data
    contentType: false, //tell jquery not to set content-type
    success: function (response, status, jqxhr) {
        //handle success
    },
    error: function (jqxhr, status, errorMessage) {
        //handle error
    }
});

Establecemos las propiedades processData y contentType en false . Esto se hace para que los archivos puedan ser enviados al servidor y procesados ​​correctamente por el servidor.