jQuery функция $.ajax()
Определение и применение
jQuery функция $.ajax() позволяет выполнить асинхронный AJAX запрос. AJAX (от англ. Asynchronous Javascript and XML — "асинхронный JavaScript и XML") — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в "фоновом" обмене данными браузера с веб-сервером.
jQuery синтаксис:
Синтаксис 1.0:
JavaScript
$.ajax( {settings} )settings - PlainObject
Синтаксис 1.5:
JavaScript
$.ajax( url, {settings} )url - String
settings - PlainObject
jQuery функция $.ajax() лежит в основе всех AJAX запросов, отправленных с использованием jQuery. Не смотря на то, что функция $.ajax() может использоваться более гибко, в большинстве случаев в этом нет необходимости. В jQuery существуют такие альтернативные методы как $.get() и .load(), которые проще в использовании.
В самом простом виде функция $.ajax() может быть вызвана без параметров:
JavaScript
$.ajax() // без параметров
Обращаю Ваше внимание, что параметры по умолчанию могут быть установлены глобально с использованием jQuery функции $.ajaxSetup(). В этом примере функция $.ajax() используется без параметров и просто загружает содержимое текущей страницы, но ничего не делает с результатом. Чтобы использовать результат, вы можете определить одну из функций обратного вызова.
Добавлен в версии jQuery
1.0 (синтаксис обновлен в версии 1.5)Значения параметров
| Параметр | Описание |
|---|---|
| url | Строка, содержащая URL адрес, на который отправляется запрос. |
| settings |
Набор пар ключ/значение, которые настраивают запрос AJAX.
Все параметры являются необязательными. Допускается, но не рекомендовано установить значение по
умолчанию для любого параметра с использованием метода
$.ajaxSetup(). Метод $.ajax() поддерживает следующие параметры:
|
Изменения в jQuery 4.0
В data можно передавать FormData и двоичные данные. Для FormData библиотека
сама отключает преобразование в строку и установку Content-Type, чтобы браузер добавил границу multipart.
Настройки processData: false и contentType: false больше не обязательны для этого случая.
Для JSONP теперь нужно явно указать dataType: "jsonp". Для выполнения загруженного скрипта задавайте
dataType: "script" или используйте
$.getScript(). Тип ответа сервера сам по себе больше не запускает скрипт, даже при запросе к тому же домену. Асинхронная загрузка
скриптов использует элемент script, когда это возможно; настройки вроде headers могут
требовать другого транспорта.
Отправка FormData
Для отправки формы создайте объект FormData из её DOM-элемента. Например, на своей странице с формой
id="profile" и серверным обработчиком /profile:
JavaScript
$("#profile").on("submit", function (event) {
event.preventDefault();
$.ajax({
url: "/profile",
method: "POST",
data: new FormData(this)
}).done(function () {
console.log("Форма отправлена");
}).fail(function (xhr, status) {
console.log("Ошибка отправки: " + status);
});
});
В 4.0 для FormData не нужно задавать processData: false и contentType: false. Встроенный
предпросмотр не выполняет сетевые запросы; этот код запускается на странице с доступным сервером.
Пример использования
HTML
<html>
<head>
<title>Использование функции $.ajax()</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
// задаем функцию при нажатиии на элемент <button>
$.ajax({
method: "POST", // метод HTTP, используемый для запроса
url: "profile-echo", // строка, содержащая URL адрес, на который отправляется запрос
data: {
// данные, которые будут отправлены на сервер
name: "Denis",
city: "Erebor",
},
success: [
function (msg) {
// функции обратного вызова, которые вызываются если AJAX запрос выполнится успешно (если несколько функций, то необходимо помещать их в массив)
$("p").text("User saved: " + msg); // добавляем текстовую информацию и данные возвращенные с сервера
},
function () {
// вызов второй функции из массива
console.log("next function");
},
],
statusCode: {
200: function () {
// выполнить функцию если код ответа HTTP 200
console.log("Ok");
},
},
});
});
});
</script>
</head>
<body>
<button>Клик</button>
<p></p>
</body>
</html>
В этом примере с использованием jQuery функции $.ajax() мы при нажатии на элемент
<button>
(кнопка) выполняем асинхронный AJAX запрос со следующими параметрами:
- method - указываем метод HTTP POST, используемый для запроса.
-
url - файл, к которому мы обращаемся ("
profile-echo"), он содержит следующий PHP код:Код<?php $name = $_POST['name']; // создаем переменную name, которая содержит переданные скрипту через HTTP метод POST данные (с ключом name) $city = $_POST['city']; // создаем переменную name, которая содержит переданные скрипту через HTTP метод POST данные (с ключом city) echo $name.", ".$city; // выводим текстовое содержимое (значение выше созданных переменных, перечисленных через запятую) ?> - data - данные, которые будут отправлены на сервер.
- success - функции обратного вызова, которые вызываются если AJAX запрос выполнится успешно. Обратите внимание, что если используется несколько функций, то необходимо помещать их в массив. Каждая функция выполняется в свою очередь.
- statusCode - объект числовых кодов HTTP и функции, которые будут вызываться, когда код ответа сервера имеет соотвествующее значение (определенный код HTTP). В нашем случае код 200.
Пример использования jQuery метода .ajax()
Исходный код для изучения. Запуск на этой странице недоступен.
index.html
HTML
<button>Клик</button><br /><br />
<p></p>
main.js
JavaScript
$(document).ready(function () {
$('button').click(function () {
$.ajax({
method: 'POST',
url: 'profile-echo',
data: {
name: 'Denis',
city: 'Erebor',
},
success: [
function (msg) {
$('p').text('User saved: ' + msg)
},
function () {
console.log('next function')
},
],
statusCode: {
200: function () {
console.log('Ok')
},
},
})
})
})
В следующем примере мы выполним AJAX запрос с помощью которого загрузим и выполним файл JavaScript.
HTML
<html>
<head>
<title>Использование функции $.ajax()</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
// задаем функцию при нажатиии на элемент <button>
$.ajax({
method: "GET", // метод HTTP, используемый для запроса
url: "greeting.js", // строка, содержащая URL адрес, на который отправляется запрос
dataType: "script", // расценивает ответ как JavaScript и возвращает его как обычный текст
});
});
});
</script>
</head>
<body>
<button>Клик</button>
<p></p>
</body>
</html>
В этом примере с использованием jQuery функции $.ajax() мы при нажатии на элемент
<button>
(кнопка) выполняем асинхронный AJAX запрос, который загружает скрипт JavaScript и выполняет его. Запрос имеет
следующие параметры:
- method - указываем метод HTTP GET, используемый для запроса.
-
url - файл, к которому мы обращаемся ("
greeting.js"), он содержит следующий JavaScript код:JavaScript$( "p" ).text( "Hello" ); // находим элемент <p> и добавляем текстовое содержимое -
dataType - определяет тип данных, который вы ожидаете получить от сервера (в jQuery 4.0 выполнение скрипта
требует явного
dataType: "script").
Пример использования jQuery метода .ajax() (загрузка и выполнение скрипта)
Исходный код для изучения. Запуск на этой странице недоступен.
index.html
HTML
<button>Клик</button><br /><br />
<p></p>
main.js
JavaScript
$(document).ready(function () {
$('button').click(function () {
$.ajax({
method: 'GET',
url: 'greeting.js',
dataType: 'script',
})
})
})