Отправка асинхронных запросов на 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
-
Создано 10.04.2014 19:29:30
-
Михаил Русаков
Комментарии (6):
Михаил, а почему когда я указываю динамические имена переменных так: data: ("dinamic_perem1"+fnumb+"&dinamic_perem2"+snumb), То этот код не передает ничего в php ? хотя в консоли не выдает никаких ошибок!
Ответить
А где знак равно? ("dinamic_perem1="+fnumb+"&dinamic_perem2="+snumb)
Ответить
Не важно. Тут забыл написать. а вообще когда передаю динамические названия переменных чтобы потом их в php распарсить, ничерта не приходит=(
Ответить
Отправьте Ваш вопрос в службу поддержки и приложите код, который не работает.
Ответить
Михаил, на сайте серьезная проблема!!! Когда пользователь попадает на сайт из Яндекса, то вместо страницы со статьей появляется страница с ошибкой! Fatal error: Call to undefined method MainController::isContainsQuery() in /home/myrusakov.ru/www/controllers/controller_class.php on line 153 И сайт теряет позиции в Яндексе. Можете проверить
Ответить
Здравствуйте. Написал свой движек, теперь хочу полностью его перевести на ajax. С навигацией по сайту решил проблему. Теперь проблема с формами, а точнее с PHP обработкой ошибок. Ошибки (если есть) записываются в сессию и с помощью header производится переход обратно к форме и в шапке вывод ошибок. Так вот. Меня смущает работа ajax и header(). Получается, кто быстрее отработает, тот и победил :) Как то можно исправить конфликт? В сторону плагинов не смотрю, хочу сам написать скрипт
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.