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

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

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

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

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