jQuery
Ajax

Sintassi

• var jqXHR = $ .ajax (url [, impostazioni])
• var jqXHR = $ .ajax ([impostazioni])
• jqXHR.done (funzione (data, textStatus, jqXHR) {});
• jqXHR.fail (funzione (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (function (jqXHR) {});

Parametri

Osservazioni

Gestione dei codici di risposta HTTP con $ .ajax ()

Oltre a .done , .fail e .always promettono callback, che vengono attivati a seconda che la richiesta ha avuto successo o meno, v'è la possibilità di attivare una funzione quando uno specifico codice di stato HTTP viene restituito dal server. Questo può essere fatto usando il parametro 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')
});

Come afferma la documentazione ufficiale di jQuery:

Se la richiesta ha esito positivo, le funzioni del codice di stato assumono gli stessi parametri del callback di successo; se si verifica un errore (incluso il reindirizzamento 3xx), prendono gli stessi parametri del callback error .

Utilizzando Ajax per inviare un modulo

A volte potresti avere un modulo e vuoi inviarlo usando ajax.

Supponiamo tu abbia questa semplice forma -

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

È possibile utilizzare il seguente codice jQuery (all'interno di una chiamata $(document).ready ) -

$('#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
      }
  });
});

Spiegazione

• var $form = $(this) - il modulo, memorizzato nella cache per il riutilizzo
• $('#ajax_form').submit(function(event){ - Quando viene inviato il modulo con ID "ajax_form", eseguire questa funzione e passare l'evento come parametro.
• event.preventDefault(); - Impedire al modulo di inviare normalmente (In alternativa, è possibile utilizzare return false dopo l' ajax({}); istruzione, che avrà lo stesso effetto)
• url: $form.attr('action'), - Ottieni il valore dell'attributo "action" del modulo e url: $form.attr('action'), per la proprietà "url".
• data: $form.serialize(), - Converte gli input all'interno del modulo in una stringa adatta per l'invio al server. In questo caso restituirà qualcosa come "name=Bob&[email protected]"

Invio di dati JSON

jQuery rende la gestione delle risposte jSON indolore, ma è necessario un po 'più di lavoro quando una determinata richiesta ti chiede di inviare dati in formato JSON:

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

Osserva che stiamo specificando il contentType corretto per i dati che inviamo; questa è una buona pratica in generale e potrebbe essere richiesta dall'API che stai postando, ma ha anche l'effetto collaterale di istruire jQuery a non eseguire la conversione predefinita di %20 a + , cosa che farebbe se contentType fosse lasciato al valore predefinito di application/x-www-form-urlencoded . Se per qualche motivo devi lasciare contentType impostato su default, assicurati di impostare processData su false per impedirlo.

La chiamata a JSON.stringify potrebbe essere evitata qui, ma usarla ci consente di fornire i dati sotto forma di un oggetto JavaScript (evitando così di mettere in imbarazzo gli errori di sintassi JSON, come mancare di citare i nomi delle proprietà).

Tutto in uno esempi

Ottieni Ajax:

Soluzione 1:

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

Soluzione 2:

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

Caricamento Ajax: un altro metodo ajax get creato per semplicità

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

.load può anche essere chiamato con dati aggiuntivi. La parte dati può essere fornita come stringa o oggetto.

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

Se .load viene chiamato con un metodo di callback, la richiesta al server sarà un post

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

Ajax Post:

Soluzione 1:

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

Soluzione 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 Ottieni JSON:

Soluzione 1:

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

Soluzione 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 Annulla una chiamata o una richiesta

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

// uccide la richiesta

xhr.abort()

Upload di file Ajax

1. Un semplice esempio completo

Potremmo usare questo codice di esempio per caricare i file selezionati dall'utente ogni volta che viene effettuata una nuova selezione di file.

<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
        }
    });
});

Ora scomporlo e ispezionarlo parte per parte.

2. Lavorare con gli input dei file

Questo documento MDN (Utilizzo di file da applicazioni Web) è una buona lettura di vari metodi su come gestire gli input dei file. Alcuni di questi metodi verranno utilizzati anche in questo esempio.

Prima di caricare file, dobbiamo prima dare all'utente la possibilità di selezionare i file che vogliono caricare. Per questo scopo useremo un file input . La proprietà multiple consente di selezionare più di un file, è possibile rimuoverlo se si desidera che l'utente selezioni un file alla volta.

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

Utilizzeremo l' change event dell'input per acquisire i file.

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

All'interno della funzione del gestore, accediamo ai file attraverso le proprietà dei file del nostro input. Questo ci dà un FileList , che è un array come oggetto.

3. Creazione e compilazione di FormData

Per caricare file con Ajax useremo FormData .

var fdata = new FormData();

FileList che abbiamo ottenuto nel passaggio precedente è un oggetto di tipo array e può essere iterato usando vari metodi incluso per loop , per ... di loop e jQuery.each . In questo esempio resteremo fedeli a jQuery.

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

Utilizzeremo il metodo append di FormData per aggiungere i file nel nostro oggetto formdata.

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

Possiamo anche aggiungere altri dati che vogliamo inviare allo stesso modo. Diciamo che vogliamo inviare alcune informazioni personali che abbiamo ricevuto dall'utente insieme ai file. Potremmo aggiungere questa informazione al nostro oggetto formdata.

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

4. Invio dei file 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
    }
});

processData proprietà processData e contentType su false . Questo è fatto in modo che i file possano essere inviati al server ed elaborati dal server correttamente.