Пример 1: Отправка GET-запроса
$.ajax({
url: "example.php", // URL-адрес сервера
method: "GET", // Метод запроса
dataType: "html", // Тип данных, которые ожидаются от сервера
success: function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
// Функция, которая вызывается при ошибке выполнения запроса
console.log(textStatus, errorThrown);
}
});
Этот пример демонстрирует, как отправить GET-запрос на сервер и получить HTML-код в ответ.
Пример 2: Отправка POST-запроса
$.ajax({
url: "example.php", // URL-адрес сервера
method: "POST", // Метод запроса
data: { // Данные, которые будут отправлены на сервер
name: "John",
age: 30
},
dataType: "html", // Тип данных, которые ожидаются от сервера
success: function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
// Функция, которая вызывается при ошибке выполнения запроса
console.log(textStatus, errorThrown);
}
});
Этот пример демонстрирует, как отправить POST-запрос на сервер с данными в теле запроса и получить HTML-код в ответ.
Пример 3: Отправка запроса с заголовком
$.ajax({
url: "example.php", // URL-адрес сервера
method: "GET", // Метод запроса
headers: { // Заголовки, которые будут отправлены на сервер
"Authorization": "Bearer xxxxxxxx",
"X-Api-Version": "1.0"
},
dataType: "html", // Тип данных, которые ожидаются от сервера
success: function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
// Функция, которая вызывается при ошибке выполнения запроса
console.log(textStatus, errorThrown);
}
});
Этот пример демонстрирует, как отправить запрос на сервер с заголовками и получить HTML-код в ответ.
Пример 4: Использование Promise
$.ajax({
url: "example.php", // URL-адрес сервера
method: "GET", // Метод запроса
dataType: "html" // Тип данных, которые ожидаются от сервера
}).done(function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(response);
}).fail(function(jqXHR, textStatus, errorThrown) {
// Функция, которая вызывается при ошибке выполнения запроса
console.log(textStatus, errorThrown);
});
Этот пример демонстрирует, как использовать Promise для выполнения запроса и получения ответа.
Пример 5: Отправка запроса с параметрами
$.ajax({
url: "example.php", // URL-адрес сервера
method: "GET", // Метод запроса
data: { // Параметры, которые будут отправлены на сервер
name: "John",
age: 30
},
dataType: "html", // Тип данных, которые ожидаются от сервера
success: function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
// Функция, которая вызывается при ошибке выполнения запроса
console.log(textStatus, errorThrown);
}
});
Этот пример демонстрирует, как отправить запрос на сервер с параметрами и получить HTML-код в ответ.
Пример 6: Использование настроек по умолчанию
$.ajaxSetup({
url: "example.php", // URL-адрес сервера
method: "GET", // Метод запроса
dataType: "html" // Тип данных, которые ожидаются от сервера
});
$.ajax({
data: { // Параметры, которые будут отправлены на сервер
name: "John",
age: 30
},
success: function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
// Функция, которая вызывается при ошибке выполнения запроса
console.log(textStatus, errorThrown);
}
});Этот пример демонстрирует, как использовать настройки по умолчанию для выполнения запроса.
Пример 7: Использование метода .load()
$("#result").load("example.php");
Этот пример демонстрирует, как использовать метод .load() для загрузки HTML-кода с сервера и вставки его в элемент страницы.
Пример 8: Использование метода .get()
$.get("example.php", function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(response);
});
Этот пример демонстрирует, как использовать метод .get() для отправки GET-запроса на сервер и получения HTML-кода в ответ.
Пример 9: Использование метода .post()
$.post("example.php", { name: "John", age: 30 }, function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(response);
});
Этот пример демонстрирует, как использовать метод .post() для отправки POST-запроса на сервер с данными в теле запроса и получения HTML-кода в ответ.
Пример 10: Использование метода .getJSON()
$.getJSON("example.php", function(response) {
// Функция, которая вызывается при успешном выполнении запроса
$("#result").html(JSON.stringify(response));
});
Этот пример демонстрирует, как использовать метод .getJSON() для отправки GET-запроса на сервер и получения JSON-данных в ответ.
Заключение
Метод .ajax() в jQuery предоставляет широкие возможности для выполнения асинхронных запросов к серверу. Он позволяет отправлять GET- и POST-запросы, работать с различными форматами данных и использовать настройки по умолчанию для упрощения кода. Кроме того, в jQuery есть другие методы, такие как .load(), .get(), .post() и .getJSON(), которые позволяют выполнять запросы к серверу еще более просто и удобно.