AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
Полное описание функции AJAX на jquery.com.
GET запрос
Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст
В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.
$.ajax(< url: ‘/index.php’, /* Куда пойдет запрос */ method: ‘get’, /* Метод передачи (post или get) */ dataType: ‘html’, /* Тип данных в ответе (xml, json, script, html). */ data: , /* Параметры передаваемые в запросе. */ success: function(data) < /* функция которая будет выполнена после успешного запроса. */ alert(data); /* В переменной data содержится ответ от index.php. */ >>);
Код можно сократить используя функцию $.get
$.get(‘/index.php’, , function(data)< alert(data); >);
Код файла index.php
echo ‘Данные приняты — ‘ . $_GET[‘text’];
GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .
Урок 14. JavaScript. Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax
$.ajax(< url: ‘/index.php’, method: ‘get’, cache: false >);
POST запросы
$.ajax(< url: ‘/index.php’, method: ‘post’, dataType: ‘html’, data: , success: function(data) < alert(data); >>);
Или сокращенная версия – функция $.post
$.post(‘/index.php’, , function(data)< alert(data); >);
Код файла index.php
echo ‘Данные приняты — ‘ . $_POST[‘text’];
POST запросы ни когда не кэшироваться.
Отправка формы через AJAX
При отправке формы применяется функция serialize() , подробнее на jquery.com.
Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .
- Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
- serialize можно применить только к тегу form и полям формы, т.е. $(‘div.form_container’).serialize(); – вернет пустой результат.
Пример отправки и обработки формы:
$(«#form»).on(«submit», function() < $.ajax(< url: ‘/handler.php’, method: ‘post’, dataType: ‘html’, data: $(this).serialize(), success: function(data)< $(‘#message’).html(data); >>); >);
Код файла handler.php
if (empty($_POST[‘login’])) < echo ‘Укажите логин’; >elseif (empty($_POST[‘password’])) < echo ‘Укажите пароль’; >else
Работа с JSON
Идеальный вариант когда нужно работать с массивами данных.
$.ajax( < url: ‘/json.php’, method: ‘get’, dataType: ‘json’, success: function(data)< alert(data.text); /* выведет «Текст» */ alert(data.error); /* выведет «Ошибка» */ >>);
Короткая версия
$.getJSON(‘/json.php’, function(data) < alert(data.text); alert(data.error); >);
$.getJSON передает запрос только через GET.
77. Обзор. Далее пишем лайки, как в vk на Django + Ajax.
Код файла json.php
header(‘Content-Type: application/json’); $result = array( ‘text’ => ‘Текст’, ‘error’ => ‘Ошибка’ ); echo json_encode($result);
Возможные проблемы
При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:
Из-за них ответ считается не валидным и считается как ошибочный запрос. В таких случаях помогает очистка буфера вывода ob_end_clean (если он используется на сайте).
. // Очистка буфера ob_end_clean(); header(‘Content-Type: application/json’); echo json_encode($result, JSON_UNESCAPED_UNICODE); exit();
Выполнение JS загруженного через AJAX
В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.
$.ajax(< method: ‘get’, url: ‘/script.js’, dataType: «script» >);
Или
$.getScript(‘/script.js’);
Дождаться выполнения AJAX запроса
По умолчанию в JQuery AJAX запросы выполняются асинхронно.
Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно. Простой пример:
var text = »; $.ajax( < url: ‘/index.php’, method: ‘get’, dataType: ‘html’, success: function(data)< text = data; >>); alert(text); /* Переменная будет пустая. */
Переменная text будет пустая, а не как ожидается текст который вернул index.php Чтобы включить синхронный режим нужно добавить параметр async: false .
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в страницы.
var text = »; $.ajax( < url: ‘/index.php’, method: ‘get’, dataType: ‘html’, async: false, success: function(data)< text = data; >>); alert(text); /* В переменной будет результат из index.php. */
Отправка HTTP заголовков
Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers .
$.ajax(< url: ‘/index.php’, method: ‘get’, dataType: ‘html’, headers: , success: function(data) < console.dir(data); >>);
В PHP они будут доступны в массиве $_SERVER , ключ массива переводится в верхний регистр с приставкой HTTP_ , например:
Обработка ошибок
Через параметр error задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.
$.ajax(< url: ‘/index.php’, method: ‘get’, dataType: ‘json’, success: function(data)< console.dir(data); >, error: function (jqXHR, exception) < if (jqXHR.status === 0) < alert(‘Not connect. Verify Network.’); >else if (jqXHR.status == 404) < alert(‘Requested page not found (404).’); >else if (jqXHR.status == 500) < alert(‘Internal Server Error (500).’); >else if (exception === ‘parsererror’) < alert(‘Requested JSON parse failed.’); >else if (exception === ‘timeout’) < alert(‘Time out error.’); >else if (exception === ‘abort’) < alert(‘Ajax request aborted.’); >else < alert(‘Uncaught Error. ‘ + jqXHR.responseText); >> >);
Через $.ajaxSetup можно задать обработчик ошибок для всех AJAX-запросов на сайте.
$.ajaxSetup( < error: function (jqXHR, exception) < . >>);
23.12.2016, обновлено 17.09.2020
Предыдущая запись Селекторы JQuery
Следующая запись Разрешить AJAX с другого домена
8 июля 2022 в 20:33
В примере Отправка формы через AJAX страница перезагружается. Видимо нужно добавить return false после $.ajax(<>);
$(«#form»).on(«submit», function() $.ajax( url: ‘/handler.php’,
method: ‘post’,
dataType: ‘html’,
data: $(this).serialize(),
success: function(data) $(‘#message’).html(data);
>
>);
return false;
>);
- Скопировать ссылку
- Пожаловаться
3 сентября 2022 в 16:51
Все верно, либо return false, либо
$(«#form»).on(«submit», function(e).
e.preventDefault();
>)
13 октября 2022 в 16:49
У меня вообще не работали POST запросы, особенно для меня, для начинающего было очень сложно, работали только GET, очень долго голову ломал почему так происходит. Нашёл пример на другом сайте, который работал долго сравнивал и думал почему так. Здесь пример не работает, а на другом сайте рабочий пример оказался.
Так вот:
$.ajax( url: ‘/index.php’,
method: ‘post’,
dataType: ‘html’,
data: ,
success: function(data) alert(data);
>
>);
Оказывается чтобы у меня заработали именно POST запросы надо было поменять строчку:
«method: ‘post’,» на:
«type: ‘post’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!
Источник: snipp.ru
Ajax как в vk
Как сделать AJAX запрос на другой сайт
Как известно, существует запрет на запрос данных через отправку кросс-доменных AJAX запросов. Это связано с безопасностью.
Соответствие: 108
Создание доски отзывов на PHP, MySQL и jQuery
Сегодня я вам покажу, как создать подобную систему, используя супер популярную технологию jQuery AJAX. Согласно спецификации, нам необходима форма, в которую пользователь будет вводить своё имя и сообщение. После того как форма будет отправлена, мы отправим введённые данные скрипту через AJAX, который вставит данные в БД и обновит содержимое доски. Но нам также нужно обновить информацию и для других пользователей. Как ? Это я вам покажу в конце урока.
Соответствие: 102
Простой пример использования шаблона jQuery
Простой пример использования шаблонов jQuery. Они помогают форматировать вывод полученных данных (например, через AJAX). Или можно использовать специально подготовленные данные .
Соответствие: 102
Как использовать медиа запросы CSS3 чтобы создать версию вашего сайта для мобильных устройств
В данной статье объясняется, как с помощью нескольких правил CSS3 можно создать рабочую версию сайта для iPhone. Будет представлен очень простой пример, а также демонстрация того, как добавить стиль маленького экрана мобильного устройства к уже существующему сайту.
Соответствие: 100
Динамическое добавление элементов к форме при помощи jQuery
Однажды, возможно, вам понадобится функциональность, которая позволит вашим пользователям динамически добавлять поля в форму веб приложения. Благодаря нашему любимому jQuery эта задача выполняется в два счёта. Для того чтобы всё работало, мы будем использовать массив, который будет отправляться на обработку языком PHP. В этом уроке мы создадим форму с кнопками добавить, удалить и сбросить и сформируем данные , которые будут отправлены через AJAX.
Соответствие: 100
Обработка HTML на серверной стороне с помощью phpQuery
При решении повседневных задач во время разработки проекта приходится работать и с клиентской и с серверной частью кода. Бизнес логика реализуется на PHP, HTML код генерируется для вывода данных в браузере пользователя. Затем используются библиотеки, такие как jQuery или Prototype, для формирования интерактивной клиентской части. Стоит задуматься о том, как изменять и манипулировать сгенерированной структурой HTML с помощью кода PHP серверной части приложения. phpQuery является отличным решением для такой задачи. Данный урок представляет собой краткое введение в phpQuery и объясняет, как можно использовать его в реальных проектах.
Соответствие: 100
Улучшаем поля ввода формы с помощью jQuery
С помощью jQuery легко сделать несколько улучшений для панели поиска или поля ввода формы. Такие эффекты существенно повышают уровень восприятия полей пользователем. В данном уроке рассмотрим как с помощью jQuery можно показывать/скрывать значения по умолчанию в поле и обеспечивать визуальную обратную связь с пользователем, когда поле выбрано для ввода данных .
Соответствие: 98
ВИДЕО: Вставляем новости в базу через Ajax
Готовим данные для БД
Соответствие: 98
Анимированные закладки с использованием MooTools
Один из возможных способов поместить много контента на одно небольшое место — это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.
Соответствие: 97
Base64 и SVG
Возможно вы слышали о способе передачи данных через URI. Это на самом деле очень интересный способ подключения ресурса, который бы в противном случае был подгружен отдельным запросом HTTP. Формат передаваемого файла может варьироваться. По сути, вы можете просто указать тип контента (например, image/png), точку с запятой, затем непосредственно данные из этого файла.
Источник: ruseller.com
Отправка запроса к api vkontakte
У меня появилась проблема по api vkontakte, дело в том что мне надо отправить определенный запрос vk api и притом это надо сделать без перезагрузки страницы, то есть аяксом, но целях безопасности браузеры блокируют такой запрос, подскажите как мне отправить запрос к api без перезагрузки страницы..
Отслеживать
задан 17 сен 2011 в 21:11
Миха Николаев Миха Николаев
994 11 11 серебряных знаков 27 27 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Почему блокируют? Отправляйте через CURL — а отправить и получить ответ через ajax. У меня всё прекрасно работает.
Отслеживать
ответ дан 17 сен 2011 в 22:10
V_Tjuryakin V_Tjuryakin
840 6 6 серебряных знаков 20 20 бронзовых знаков
А могли бы Вы скинуть какой нибудь исходник.
17 сен 2011 в 22:13
17 сен 2011 в 22:20
Всё просто. Если хотите использовать именно ajax, то используйте протокол передачи jsonp. Т.е. в ajax запросе будет: dataType: ‘jsonp’ и callback функция.
JSONP (JSON Padding) или «JSON с подкладкой» является расширением JSON, когда имя функции обратного вызова указывается в качестве входного аргумента. К примеру:
Здесь параметр jsonp содержит имя callback функции parseResponse. Посторонний сервер example.com может вернуть следующий код:
Теперь код вызывает javascript-функцию первого домена.
Отслеживать
ответ дан 7 окт 2015 в 10:40
Алексей Шиманский Алексей Шиманский
70.6k 12 12 золотых знаков 87 87 серебряных знаков 179 179 бронзовых знаков
- ajax
- вконтакте
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Источник: ru.stackoverflow.com