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";
?>

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.