Ajax запросы с помощью методов $.post() и $.get().
В прошлой статье мы рассмотрели, как отправлять асинхронные запросы на JQuery с помощью метода $.Ajax(), а в этой я покажу ещё два способа.
В качестве примера возьмём всё тот же server.php, который будет складывать 2 числа и возвращать нам их сумму.
$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>
Теперь напишем наш скрипт
$(document).ready(function(){
$("#submit").click(function(){
var fnumb = $("#a").val();
var snumb = $("#b").val();
$.post('server.php', {a:fnumb,b:snumb}, function(data){
$("#block").text(data);
});
});
});
Как можно видеть, код стал немного короче, чем был в прошлой статье, потому что $.post() это ни что иное, как сокращённая форма метода $.Ajax() с запросом типа POST.
Первым параметров мы передаём строку, содержащую название нашего сервера, вторым параметром мы передаём объект, где указываем название переменной, которую отправляем и её значение через двоеточие, третьим параметром идёт анонимная функция, принимающая данные от сервера. В теле функции мы, как и в прошлой статье, вставили полученный результат в div с id=block.
Если вы хотите отправить запрос типа GET, то просто измените название метода с $.post() на $.get(), а параметры у него идентичные.
$(document).ready(function(){
$("#submit").click(function(){
var fnumb = $("#a").val();
var snumb = $("#b").val();
$.get('server.php', {a:fnumb,b:snumb}, function(data){
$("#block").text(data);
});
});
});
Только не забудьте изменить также и наш сервер!
$a = $_GET['a'];
$b = $_GET['b'];
echo $a+$b;
-
Создано 11.04.2014 19:00:21
-
Михаил Русаков
Комментарии (3):
здравствуйте! а как в скрипт приведённый в статье вписать сопровождающие функции ? типа (ajaxError)
Ответить
Здравствуйте! А как сделать так чтобы было поле с набранными данными на нем. Потом нажимаем Добавить и добавляется новое поле с этим значением.
Ответить
Здраствуйте! У меня такой вопрос: на сайте есть папка /ajax/ и /js/ в папке ajax находятся php обработчики ajax запросов, а в /js/ js скрипты. Так вот я помещаю фаил .htaccess в котором deny from all, в папку с обработчиками и ajax запросы перестают работать, вопрос: как тогда закрыть прямой доступ к содержимому папки?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.