jQuery
Ajax

Składnia

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

Parametry

Uwagi

Obsługa kodów odpowiedzi HTTP za pomocą $ .ajax ()

Oprócz .done , .fail i. .always obiecują wywołania zwrotne, które są wyzwalane w zależności od tego, czy żądanie zakończyło się powodzeniem, czy nie, istnieje możliwość uruchomienia funkcji, gdy określony kod stanu HTTP zostanie zwrócony z serwera. Można to zrobić za pomocą parametru 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')
});

Zgodnie z oficjalną dokumentacją jQuery:

Jeśli żądanie zakończy się powodzeniem, funkcje kodu stanu przyjmują te same parametry, co wywołanie zwrotne powodzenia; jeśli spowoduje błąd (w tym przekierowanie 3xx), przyjmują te same parametry, co wywołanie zwrotne error .

Korzystanie z Ajax do przesłania formularza

Czasami możesz mieć formularz i chcesz go przesłać za pomocą ajax.

Załóżmy, że masz tę prostą formę -

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

Można użyć następującego kodu jQuery (w wywołaniu $(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
      }
  });
});

Wyjaśnienie

• var $form = $(this) - formularz buforowany do ponownego użycia
• $('#ajax_form').submit(function(event){ - Po przesłaniu formularza o identyfikatorze "ajax_form" uruchom tę funkcję i przekaż zdarzenie jako parametr.
• event.preventDefault(); - Zapobiegaj normalnemu przesyłaniu formularza (Alternatywnie możemy użyć return false po instrukcji ajax({}); które będą miały taki sam efekt)
• url: $form.attr('action'), - Uzyskaj wartość atrybutu formularza „action” i użyj go dla właściwości „url”.
• data: $form.serialize(), - Konwertuje dane wejściowe w formularzu na ciąg odpowiedni do wysłania na serwer. W takim przypadku zwróci coś takiego jak „name=Bob&[email protected]”

Wysyłanie danych JSON

jQuery sprawia, że obsługa odpowiedzi jSON jest bezbolesna, ale wymagana jest nieco więcej pracy, gdy dane żądanie chce wysłać dane w formacie JSON:

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

Zauważ, że określamy poprawny contentType dla przesyłanych danych; jest to ogólnie dobra praktyka i może być wymagane przez API, do którego piszesz - ale ma również efekt uboczny polegający na instruowaniu jQuery, aby nie wykonywał domyślnej konwersji %20 na + , co zrobiłby, gdyby contentType był pozostawiono na domyślnej wartości application/x-www-form-urlencoded . Jeśli z jakiegoś powodu musisz pozostawić wartość contentType ustawioną na wartość domyślną, ustaw wartość processData na wartość false, aby temu zapobiec.

Można tu uniknąć wywołania JSON.stringify , ale użycie go pozwala nam dostarczyć dane w postaci obiektu JavaScript (unikając w ten sposób kłopotliwych błędów składniowych JSON, takich jak brak cytowania nazw właściwości).

Wszystko w jednym przykładzie

Ajax Get:

Rozwiązanie 1:

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

Rozwiązanie 2:

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

Ajax Load: kolejna metoda ajax otrzymana dla uproszczenia

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

.load można również wywołać z dodatkowymi danymi. Część danych może być dostarczona jako ciąg lub obiekt.

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

Jeśli .load zostanie wywołany za pomocą metody wywołania zwrotnego, żądanie do serwera zostanie wysłane

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

Ajax Post:

Rozwiązanie 1:

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

Rozwiązanie 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:

Rozwiązanie 1:

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

Rozwiązanie 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 Przerwij połączenie lub prośbę

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

// zabij prośbę

xhr.abort()

Przesyłanie plików Ajax

1. Prosty kompletny przykład

Możemy użyć tego przykładowego kodu, aby przesłać pliki wybrane przez użytkownika za każdym razem, gdy zostanie wybrany nowy plik.

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

Teraz podzielmy to i sprawdzimy to część po części.

2. Praca z wejściami plików

Ten dokument MDN (Korzystanie z plików z aplikacji internetowych) to dobra lektura na temat różnych metod obsługi danych wejściowych plików. Niektóre z tych metod zostaną również wykorzystane w tym przykładzie.

Zanim przejdziemy do przesyłania plików, najpierw musimy dać użytkownikowi możliwość wyboru plików, które chcą przesłać. W tym celu użyjemy file input . multiple właściwość pozwala wybrać więcej niż jeden plik, możesz go usunąć, jeśli chcesz, aby użytkownik wybrał jeden plik na raz.

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

Będziemy używać change event danych wejściowych do przechwytywania plików.

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

Wewnątrz funkcji obsługi uzyskujemy dostęp do plików poprzez właściwość files naszych danych wejściowych. To daje nam FileList , która jest obiektem tablicowym.

3. Tworzenie i wypełnianie formularzy

Aby przesłać pliki za pomocą Ajax, użyjemy FormData .

var fdata = new FormData();

FileList, którą uzyskaliśmy w poprzednim kroku, jest obiektem tablicowym i może być iterowany przy użyciu różnych metod, w tym dla pętli , dla ... pętli i jQuery.each . W tym przykładzie będziemy trzymać się jQuery.

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

Będziemy używać metody dołączania FormData do dodawania plików do naszego obiektu formdata.

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

Możemy również dodać inne dane, które chcemy przesłać w ten sam sposób. Powiedzmy, że chcemy przesłać niektóre dane osobowe, które otrzymaliśmy od użytkownika wraz z plikami. Możemy dodać tę informację do naszego obiektu formdata.

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

4. Wysyłanie plików za pomocą 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
    }
});

Ustawiamy właściwości processData i contentType na false . Odbywa się to, aby pliki mogły zostać wysłane na serwer i poprawnie przetworzone przez serwer.