В прошлой статье мы рассмотрели, как отправлять асинхронные запросы на JQuery с помощью метода $.Ajax() , а в этой я покажу ещё два способа.
В прошлой статье мы рассмотрели, как отправлять асинхронные запросы на 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;
