Главная->Уроки по js->Ajax запросы с помощью методов $.post() и $.get()
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;
