Главная > Блог > Web-разработка > JavaScript и TypeScript >

AJAX. Основы передачи данных

03.07.2014

Теги: AJAX • jQuery • POST • Web-разработка • Форма

В jQuery есть несколько методов, которые осуществляют запросы к серверной части сайта без перезагрузки страницы. Мы не будем рассматривать каждый метод отдельно, по той простой причине, что все они являются сокращенными функция метода $.ajax(). Для начала, давайте помотрим на код ниже, а дальше разберем его подробней:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>AJAX</title>
    <script src="jquery-2.1.1.min.js"></script> <!-- библиотека jQuery -->
    <script src="script.js" charset="UTF-8"></script> <!-- наш javascript-код -->
</head>
<body>
    <button id="button">Отправить запрос</button> <!-- кнопка для запуска AJAX-запроса -->
    <div id="output"></div> <!-- блок для вывода результатов -->
</body>
</html>

$(document).ready(function() {
    var output = $('#output');         // блок вывода информации
    $('#button').on('click', function() {
        $.ajax({
            url: 'handler.php',        // путь к php-обработчику
            type: 'POST',              // метод передачи данных
            dataType: 'json',          // тип ожидаемых данных в ответе
            data: {key: 5},            // данные, которые передаем на сервер
            beforeSend: function() {   // функция вызывается перед отправкой запроса
                output.text('Запрос отправлен. Ждите ответа.');
            },
            error: function(req, text, error) { // отслеживание ошибок во время выполнения ajax-запроса
                output.text('Произошла ошибка! ' + text + ', ' + error);
            },
            complete: function() {      // функция вызывается по окончании запроса
                output.append('<p>Запрос полностью завершен!</p>');
            },
            success: function(json) {  // функция, которая будет вызвана при удачном завершении запроса
                // json — переменная, содержащая данные ответа от сервера
                output.html(json);     // выводим на страницу данные, полученные с сервера
            }
        });
    });
});

<?php
if (isset($_POST['key'])){
    $response = false;
    $key = (int)$_POST['key']; // защита — приводим к целому
    if ($key > 0) {
        $response = '<p>Получили значение ' . $key . '</p>';
    }
    die(json_encode($response)); // возвращаем данные в JSON-формате
}

Что будет происходить на каждом этапе:

При нажатии на кнопку, начинает работать javascript-код
Перед отправкой, сработает функция beforeSend. Она выведет в блок id="output" сообщение о начале запроса
Если что-то пойдет не так (например, путь к обработчику указан не верно), то сработает функция error и в блок выведется ошибка
Если всё нормально, то запустится функция success и в блоке появится результат нашего запроса
На последнем этапе — выполнится функция complete, которая добавит в блок вывода сообщения об окончании AJAX-запроса

Функции beforeSend и complete можно использовать, например, для вывода какой-нибудь картинки-прелоадера, чтоб дать понять пользователю, что процесс идет.

Дополнительно

jQuery. Русская документация

Поиск: AJAX • POST • Web-разработка • jQuery • Форма