Ajax + PHP: пример | sitear.ru

Примеры отправки AJAX JQuery

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 .

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(); – вернет пустой результат.

Пример отправки и обработки формы:

Код файла handler.php

if (empty($_POST['login'])) < echo 'Укажите логин'; >elseif (empty($_POST['password'])) < echo 'Укажите пароль'; >else

Работа с JSON

Идеальный вариант когда нужно работать с массивами данных.

Короткая версия

$.getJSON('/json.php', function(data) < alert(data.text); alert(data.error); >);

$.getJSON передает запрос только через GET.

Код файла 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 запроса

По умолчанию в 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(< 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); >> >);

Комментарии 4

В примере Отправка формы через 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;
>);

$("#form").on("submit", function(e). 
e.preventDefault();
>)

У меня вообще не работали POST запросы, особенно для меня, для начинающего было очень сложно, работали только GET, очень долго голову ломал почему так происходит. Нашёл пример на другом сайте, который работал долго сравнивал и думал почему так. Здесь пример не работает, а на другом сайте рабочий пример оказался.
Так вот:
$.ajax( url: ‘/index.php’,
method: ‘post’,
dataType: ‘html’,
data: ,
success: function(data) alert(data);
>
>);
Оказывается чтобы у меня заработали именно POST запросы надо было поменять строчку:
«method: ‘post’,» на:
«type: ‘post’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!

Источник

AJAX + PHP: применение, взаимодействие, пример

В данной статье поговорим о взаимодействии ajax с php. Как связать работу ajax скрипта и php кода? Как применить ajax в веб разработке? Если вас интересуют такие вопросы, вы найдете на них ответы в нашей статье. А также примеры ajax php кода.

Наши цели

Применение ajax + php

Для того, чтобы понять, нужен ли нам вообще ajax с php, давайте разберемся для чего он может быть полезен. Применение ajax+ php может быть разнообразным, единственное, то что, нельзя конструировать элементы страницы с помощью данной технологии, которые несут в себе релевантность для поисковых систем. Потому что ajax подгружает элементы страницы после ее загрузки при вызове js событий, но как нам известно, поисковые системы не умеют читать javascript кода, поэтому нужно тщательно выбирать где нужно, а где не нужно применять ajax с php.

Где можно применить ajax + php?

1. Добавление нового комментария

4. Организация поиска на сайте (автозавершение)

5. Пошаговая регистрация пользователя на сайте

Как видите вариантов применения ajax + php масса. То есть, можно применить там, где перезагрузка страницы будет не уместной, где нужно просто обменяться данными с сервером.

Где не стоит применять ajax + php

Мое мнение объективное, может вы думаете иначе, но полагаясь на мой опыт скажу что ajax + php не стоит применять:

2. Реализации вкладок на странице (Например: когда в интернет магазине на странице товара вы видите обзор, информация, комментарии, фото, видео … не нужно делать загрузку данных при переключении данных вкладок.)

И другие негативные примеры, которые могут навредить лучшему ранжированию вашей страницы.

Взаимодействие ajax с php

По сути, технология ajax не может существовать без php скриптов, так как ajax, только отправляет данные на сервер и принимает обратный ответ, при этом не перезагружая страницы. Поэтому правильнее задать вопрос, как связать работу ajax и php. Но об этом мы поговорим в следующем пункте статьи (ajax php пример), а сейчас разберемся с спецификой работы ajax.

Для отправки данных на сервер, нужно создать объект XMLHTTPRequest. С помощью него открыть url (php скрипт), послать на него данные (POST или GET метод), получить ответ, и средствами знаний языка js вывести полученный ответ сервера на монитор (ответом может быть любой фрагмент или элемент страницы сайта).

Для прояснения посмотрите ниже предоставленную схему иллюстрирующую взаимодействие ajax с php.

Ajax + php пример

Для примера взаимодействия ajax с php, создадим два файла:

1. ajax_page.html

2. get_ajax.php

Сначала рассмотрим пользовательскую сторону приложения, то есть ajax_page.html:

      
Здесь будем принимать отчеты о работе ajax приложения и ответ сервера.
 
Поле ввода 1
 
Введите свой текст. Например: Я люблю sitear.ru!
 
Поле ввода 2
 
Произвольный текст. Я тащусь от этой статьи, и хочу подписаться на RSS, что-бы читать такие статьи почаще. 
 , success:function(data) >)' >
  

ajax_page.html:

Разберем javascript сторону данного примера:

XmlHttp() – функция которая создает объект XMLHttpRequest(), она написана максимально компактно и кроссбраузерно.

ajax(param) – наш обработчик при вызове событий (onclick), принимает в массиве paramнеобходимые данные:

url – куда отсылать данные, причем он может быть в таком виде page.php?parameter=value, то есть информация может передаваться по методу GET.

statbox – ид html блока который будет принимать результаты работы ajax + php приложения.

method – метод отправки данных, может быть POST или GET. В нашем примере мы используем POST метод, но в то же время через url можно передавать информацию GET методом.

data – массив передаваемых данных. В нашем примере, данные автоматически берутся из поля 1 и 2, хотя можно просто писать data: .

success – имя функции или сама функция, которая будет обрабатывать полученные данные (текст).

Вызов функции ajax как вы видите сделан событием onclick=ajax().

Теперь разберем серверную сторону ajax + php приложения, то есть файл get_ajax.php:

"; while(list ($key, $val) = each ($_POST)) < $val = iconv("UTF-8","CP1251", $_POST[$key]); echo "".$key.": "."
".stripslashes($val)."
 
"; > ?>
 
Здесь все гораздо проще. Сначала устанавливаем кодировку выходящих данных, с помощью header. Устанавливаем запрет на кеширование данных. sleep(2) – приостанавливает работу скрипта на 2 секунды, это для того, что бы увидеть анимацию ожидания wait.gif. Выводим полученные данные, при этом читая все элементы массива $_POST и преобразуя их в нужную кодировку (для кириллицы).
 
Для запуска нашего ajax php приложения загружаем в браузер страничку ajax_page.html
 
Вот что у меня получилось при нажатии кнопки TEST AJAX :
 
 
Это ответ, полученный от файла get_ajax.php:
 
 
Остались еще вопросы по поводу ajax + php? Задайте их в комментариях ниже…
 
Источник