В этой статье вы прочитаете как работать AJAX с помощью JQuery, тут не будет рассказываться всё в мельчайших подробностях, но самое главное вы поймёте.
Также, если не установили себе JQuery или не знаете как его вообще установить, то прочитайте статью: «Что такое JQuery и как его подключить».
Работа с AJAX через JQuery:
Перед тем как начать писать на JavaScript программу, сделаем не большой скрипт на PHP.
Если вы не знаете язык программирования PHP,
то посмотрите наш учебник по нему.
1 2 3 4 5 6 7 | // Условие, есть ли параметр "req" в GET запросе if ($_GET["req"]) { // Заголовок ответа header('Content-Type: application/json'); // Ответ в формате JSON print json_encode(array('data' => rand(0, 10))); } |
Как видите, сперва идёт проверка, что есть в GET запросе параметр req, если всё верно, то задаём заголовок, для отправки JSON данных в качестве ответа, отправляем случайное число, от нуля до десяти.
Создадим не большой HTML файл.
1 2 | <button id="btn">Клик</button> <div id="res"></div> |
В него добавляем кнопку, при нажатии которой будим отправлять данные через AJAX, ниже блок куда будим выводить результат ответа сервера.
Теперь посмотрим как отправить AJAX запрос в JQuery, вот код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // Отслеживаем событие нажатия мыши $("#btn").click(function () { // Отправка данных через AJAX $.ajax({ type: "get", // Тип запроса url: "./ajax.php", // Куда отправлять запрос // Массив данных для отправки data: { "req": true }, // Функция если ответ без ошибок success: function (response) { // Пишем результат в блок $("#res").text(response.data) } }); }); |
Это совсем небольшой код, мы объявляем обработчик события нажатия мышки на кнопку, внутри делаем AJAX запрос с помощью функции $.ajax(data), в качестве параметра data, выступает JSON объект в котором задаём настройки для запроса.
Тут только показаны самые основные настройки, в начале определяем тип запроса, у нас это GET, потом параметром url куда отправлять его, data это данные которые нужно отправить, success, функция которая будет вызываться если ответ пришёл без ошибок.
Вот что получилось.
Вот такая не большая программа сделана с помощью JQuery и AJAX API, но надо ещё показать остальные параметры.
- accepts — Указываются допустимые заголовки для ответа сервера;
- async — Параметр для обозначение перезагрузки страницы,
по умолчанию true, значит страница не перезагружается; - beforeSend — Функция которая будит вызвана
перед отправкой запроса; - cache — Параметр для киширования страницы,
по умолчанию стоит true, значит данные кишируются; - complete — Функция которая будет вызываться
после отправки запроса; - contentType — Указывает формат отправленных данных;
- data — Данные для отправки на сервер;
- dataFilter — Функция которая будет обрабатывать данные присланные сервером;
- dataType — Тип данных который ожидают получить от сервера;
- error — Функция которая будет вызываться в случае получение ошибки от сервера;
- headers — Задаёт дополнительные заголовки;
- ifModified — При случае если задан true, то запрос успешный, только если ответ сервера отличается от предыдущего, по умолчанию false;
- password — Пароль для аутентификации на сервере, если это требуется;
- success — Функция будет вызываться в случае удачного запроса;
- timeout — Время ожидания ответа от сервера;
- type — Определяет тип запроса;
- url — Определяет адрес, куда отправлять запрос;
- username — Имя пользователя для аутентификации на сервере, если это требуется;
Тут сейчас были показаны все параметры, которые вы можете использовать для отправки AJAX через JQuery.
Вывод:
В этой статье вы прочитали как работать с AJAX c помощью JQuery, тут было рассказано самое важное. Ещё, надо сказать: используете это только при необходимости, например, для старого проекта, в остальных случаях подойдёт лучше библиотека axios.js, так как, JQuery уже устарел.
Также если вы не знаете что такое AJAX, то прочитайте статью: «Что такое AJAX и как он работает»
Подписываетесь на соц-сети:
Оценка:
Загрузка...