Всем привет! Сегодня разберём важную тему, а именно как отправлять AJAX запросы на JQuery .
Всем привет! Сегодня разберём важную тему, а именно как отправлять AJAX запросы на JQuery.
Если вы используете на своём сайте библиотеку JQuery, то вам больше не нужно писать огромный код, чтобы отправить запрос AJAX, а потом ещё беспокоится о кроссбраузерности, потому что библиотека сделает всё за вас! Давайте сразу перейдём к практике. Пример возьмём самый банальный: отправляем 2 числа на сервер, а он возвращает нам их сумму.
Для начала напишем наш простой сервер server.php
$a = $_POST['a'];
$b = $_POST['b'];
echo $a+$b;
Теперь перейдём к HTML
<html>
<head>
<title>JQuery AJAX</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<input type="text" id="a">
<input type="text" id="b">
<button id="submit">Отправить!</button>
<div id="block"></div>
</body>
</html>
HTML до безобразия прост: 2 текcтовых поля, блок, куда будут выведены данные с сервера и кнопка для отправки данных.
Теперь перейдём к нашему файлу main.js, где и напишем наш скрипт.
$(document).ready(function() {
$("#submit").click(function() {
var fnumb = $("#a").val();
var snumb = $("#b").val();
alert(fnumb + " : " + snumb);
});
});
Вот, что у нас пока получилось. Когда документ полностью загружен, мы вешаем на нашу кнопку событие клик, в котором отбираем значения с полей функцией val(). Чтобы проверить, что у нас всё правильно, выведем эти значения функцией alert(). Обязательно проверьте меня, вдруг ошибся ;)
Что ж, когда вы убедились, что всё сработало нормально, перейдём к следующему этапу: отправке асинхронного запроса
$(document).ready(function() {
$("#submit").click(function() {
var fnumb = $("#a").val();
var snumb = $("#b").val();
$.ajax({
url: "server.php",
type: "POST",
dataType: "text",
data: ("a="+fnumb+"&b="+snumb),
success: function(data){
$("#block").text(data);
}
});
});
});
Итак, разберём, что мы тут сделали. Мы вызвали метод ajax объекта jquery и передали туда объект со свойствами. Что же эти свойства значат?
- url - адрес сервера, куда отправятся данные
- type - метод запроса. По-умолчанию GET
- dataType - тип данных, которые мы планируем получить от сервера. Может быть: text, html, script, xml, json, jsonp
- data - это собственно данные, которые мы хотим отправить серверу. Заметьте, что параметры разделяются знаком &
- success - в случае успеха, вызываем анонимную функцию, в которую придут данные. А в теле фунции просто вставляем их в блок div
Вот и всё. Теперь, если вы введёте 2 числа в тектовые поля и нажмёте кнопку "отправить", то получите сумму этих чисел без перезагрузки страницы. Конечно, параметров больше, и мы разобрали далеко не всё, но вы получили базу, используя которую уже можно сделать классные вещи! Если вы испытываете трудности с пониманием данной статьи, то посмотрите бесплатный курс по JavaScript, JQuery и Ajax
