jQuery-методы $.get() и $.post() предоставляют простые инструменты для асинхронной отправки и получения данных с веб-сервера. Оба метода в значительной степени идентичны, за исключением одного существенного различия: $.get() делает запросы Ajax с помощью метода HTTP GET, тогда как $.post() делает запросы Ajax с помощью метода HTTP POST.
Основной синтаксис этих методов может задан так:
$.get(URL, data, success); —Или— $.post(URL, data, success);Параметры в приведенном выше синтаксисе имеют следующие значения:
- Обязательный параметр URL указывает URL, на который отправляется запрос;
- Необязательный параметр data указывает набор строки запроса (то есть пары ключ / значение), которая отправляется на веб-сервер вместе с запросом;
- Необязательный параметр success — это, по сути, функция обратного вызова, которая выполняется в случае успешного выполнения запроса. Обычно используется для получения возвращенных данных.
Методы HTTP GET и POST используются для отправки запроса из браузера на сервер. Основное различие между этими методами заключается в том, как данные передаются на сервер. Подробнее см. Руководство по GET и POST методам.
Выполнение GET-запроса с помощью AJAX с использованием jQuery
В следующем примере jQuery-метод $.get() используется для создания Ajax-запроса к файлу date-time.php с использованием метода HTTP GET. Он просто извлекает дату и время, возвращенные с сервера, и отображает их в браузере, не обновляя страницу.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("date-time.php", function(data){
// Показываем возвращенные данные в браузере
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<div id="result">
<h2>Содержимое поля DIV результата будет заменено датой и временем сервера</h2>
</div>
<button type="button">Загрузить дату и время</button>
</body>
</html>Вот наш файл date-time.php, который просто выводит текущую дату и время сервера.
<?php
// Возвращает текущую дату и время с сервера
echo date("F d, Y h:i:s A");
?>Если вы столкнулись с какими-либо трудностями при локальном запуске этих примеров на своем ПК, ознакомьтесь с руководством по загрузке jQuery Ajax.
Вы также можете отправить некоторые данные на сервер с запросом. В следующем примере код jQuery делает запрос Ajax к create-table.php, а также отправляет некоторые дополнительные данные на сервер вместе с запросом.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// Получаем значение из элемента input на странице
var numValue = $("#num").val();
// Отправляем входные данные на сервер, используя get-запрос
$.get("create-table.php", {number: numValue} , function(data){
// Показываем возвращенные данные в браузере
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<label>Введите номер: <input type="text" id="num"></label>
<button type="button">Показать таблицу умножения</button>
<div id="result"></div>
</body>
</html>Вот PHP-скрипт нашего файла create-table.php, который просто выводит таблицу умножения для числа, введенного пользователем при нажатии кнопки.
<?php
$number = htmlspecialchars($_GET["number"]);
if(is_numeric($number) && $number > 0){
echo "<table>";
for($i=0; $i<11; $i++){
echo "<tr>";
echo "<td>$number x $i</td>";
echo "<td>=</td>";
echo "<td>" . $number * $i . "</td>";
echo "</tr>";
}
echo "</table>";
}
?>Выполнение POST-запроса с помощью AJAX с использованием jQuery
POST-запросы идентичны GET-запросам в jQuery. Итак, обычно какой метод вы должны использовать: $.get() или $.post() в основном зависит от требований вашего серверного кода. Если у вас есть большой объем данных для передачи (например, данные формы), вам нужно использовать POST, потому что GET имеет строгие ограничения на передачу данных.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery post() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
// Останавливаем отправку формы по умолчанию
event.preventDefault();
/* Сериализуем отправленные значения элемента input для безопасности */
var formValues = $(this).serialize();
// Отправляем данные формы, используя POST
$.post("display-comment.php", formValues, function(data){
// Показываем возвращенные данные в браузере
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<form>
<label>Имя: <input type="text" name="name"></label>
<label>Комментарий: <textarea cols="50" name="comment"></textarea></label>
<input type="submit" value="Send">
</form>
<div id="result"></div>
</body>
</html>Вот наш файл display-comment.php, который просто выводит данные, введенные пользователем.
<?php
$name = htmlspecialchars($_POST["name"]);
$comment = htmlspecialchars($_POST["comment"]);
echo "Привет, $name. Ваш комментарий был успешно получен." . "";
echo "Вот комментарий, который вы опубликовали: $comment";
?>
