jQuery
Ajax

Синтаксис

• var jqXHR = $ .ajax (url [, settings])
• var jqXHR = $ .ajax ([настройки])
• jqXHR.done (функция (data, textStatus, jqXHR) {});
• jqXHR.fail (функция (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (function (jqXHR) {});

параметры

замечания

Обработка HTTP-ответов с помощью $ .ajax ()

В дополнении к .done , .fail и .always обещают обратные вызовы, которые срабатывают на основании был ли запрос успешным или нет, есть вариант , чтобы вызвать функцию , когда конкретный код HTTP Status возвращаются с сервера. Это можно сделать с statusCode параметра 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')
});

Как официальная документация jQuery гласит:

Если запрос выполнен успешно, функции кода состояния имеют те же параметры, что и обратный вызов успеха; если это приводит к ошибке (включая перенаправление 3xx), они принимают те же параметры, что и обратный вызов error .

Использование Ajax для отправки формы

Иногда у вас может быть форма и вы хотите отправить ее с помощью ajax.

Предположим, у вас есть эта простая форма -

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

Следующий код jQuery можно использовать (в вызове $(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
      }
  });
});

объяснение

• var $form = $(this) - форма, кэшированная для повторного использования
• $('#ajax_form').submit(function(event){ - Когда представлена ​​форма с идентификатором «ajax_form», запустите эту функцию и передайте событие в качестве параметра.
• event.preventDefault(); - Предотвратить отправку формы нормально (в качестве альтернативы мы можем использовать return false после инструкции ajax({}); которая будет иметь тот же эффект)
• url: $form.attr('action'), - получить значение атрибута «действие» формы и использовать его для свойства «url».
• data: $form.serialize(), - преобразует входные данные в форме в строку, подходящую для отправки на сервер. В этом случае он вернет что-то вроде «name=Bob&[email protected]»

Отправка данных JSON

jQuery делает обработку ответов jSON безболезненной, но требуется немного больше работы, когда данный запрос желает отправить данные в формате JSON:

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

Обратите внимание, что мы указываем правильный contentType для данных, которые мы отправляем; это хорошая практика в целом и может потребоваться для API, который вы отправляете, но он также имеет побочный эффект от инструкции jQuery не выполнять преобразование по умолчанию от %20 до + , что и было бы, если contentType был слева от значения по умолчанию application/x-www-form-urlencoded . Если по какой-то причине вы должны оставить contentType установленным по умолчанию, обязательно установите для параметра processData значение false, чтобы предотвратить это.

Вызов JSON.stringify можно было бы избежать здесь, но его использование позволяет нам предоставлять данные в виде объекта JavaScript (таким образом, избегая смущающих синтаксических ошибок JSON, таких как отказ от цитирования имен свойств).

Все в одном примере

Ajax Получить:

Решение 1:

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

Решение 2:

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

Ajax Load: еще один метод get ajax для упрощения

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

.load также можно вызывать с дополнительными данными. Часть данных может быть представлена ​​как строка или объект.

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

Если .load вызывается с помощью метода обратного вызова, запрос на сервер будет сообщением

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

Ajax Post:

Решение 1:

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

Решение 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 Получить JSON:

Решение 1:

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

Решение 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 Прервать вызов или запрос

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

// убиваем запрос

xhr.abort()

Загрузка файлов Ajax

1. Простой полный пример

Мы могли бы использовать этот примерный код для загрузки файлов, выбранных пользователем каждый раз при создании нового файла.

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

Теперь давайте разберем это и проверим его по частям.

2. Работа с файловыми входами

Этот MDN-документ (с использованием файлов из веб-приложений) хорошо читает о различных методах обработки входных файлов. Некоторые из этих методов также будут использоваться в этом примере.

Прежде чем мы загрузим файлы, мы сначала должны предоставить пользователю способ выбрать файлы, которые они хотят загрузить. Для этого мы будем использовать file input . multiple свойство позволяет выбирать несколько файлов, их можно удалить, если вы хотите, чтобы пользователь выбирал один файл за раз.

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

Мы будем использовать change event ввода для захвата файлов.

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

Внутри функции обработчика мы получаем доступ к файлам через свойство файлов нашего ввода. Это дает нам FileList , который является массивом, подобным объекту.

3. Создание и заполнение формы

Чтобы загрузить файлы с помощью Ajax, мы будем использовать FormData .

var fdata = new FormData();

FileList, который мы получили на предыдущем шаге, является массивом, подобным объекту, и его можно повторить с использованием различных методов, в том числе для цикла , для ... цикла и jQuery.each . В этом примере мы будем придерживаться jQuery.

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

Мы будем использовать метод добавления формы FormData для добавления файлов в наш объект formdata.

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

Мы также можем добавить другие данные, которые мы хотим отправить таким же образом. Предположим, мы хотим отправить некоторую личную информацию, которую мы получили от пользователя вместе с файлами. Мы могли бы добавить эту информацию в наш объект formdata.

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

4. Отправка файлов с помощью 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 свойств processData и contentType значение false . Это делается для того, чтобы файлы могли быть отправлены на сервер и правильно обработаны сервером.