- PHP — AJAX and PHP
- Example
- Example Explained
- Example
- The PHP File — «gethint.php»
- Примеры отправки AJAX JQuery
- GET запрос
- Код можно сократить используя функцию $.get
- Код файла index.php
- POST запросы
- Или сокращенная версия – функция $.post
- Код файла index.php
- Отправка формы через AJAX
- Код файла handler.php
- Работа с JSON
- Короткая версия
- Код файла json.php
- Возможные проблемы
- Выполнение JS загруженного через AJAX
- Или
- Дождаться выполнения AJAX запроса
- Отправка HTTP заголовков
- Обработка ошибок
- Комментарии 4
- Как передать HTML объект аяксом в php-скрипт?
- Войдите, чтобы написать ответ
- Есть ли бесплатные аналоги плагина introjs.com?
PHP — AJAX and PHP
The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:
Example
Example Explained
In the example above, when a user types a character in the input field, a function called «showHint()» is executed. The function is triggered by the onkeyup event. Here is the HTML code:
Example
- Create an XMLHttpRequest object
- Create the function to be executed when the server response is ready
- Send the request off to a PHP file (gethint.php) on the server
- Notice that q parameter is added to the url (gethint.php?q=»+str)
- And the str variable holds the content of the input field
The PHP File — «gethint.php»
The PHP file checks an array of names, and returns the corresponding name(s) to the browser:
// Array with names
$a[] = «Anna»;
$a[] = «Brittany»;
$a[] = «Cinderella»;
$a[] = «Diana»;
$a[] = «Eva»;
$a[] = «Fiona»;
$a[] = «Gunda»;
$a[] = «Hege»;
$a[] = «Inga»;
$a[] = «Johanna»;
$a[] = «Kitty»;
$a[] = «Linda»;
$a[] = «Nina»;
$a[] = «Ophelia»;
$a[] = «Petunia»;
$a[] = «Amanda»;
$a[] = «Raquel»;
$a[] = «Cindy»;
$a[] = «Doris»;
$a[] = «Eve»;
$a[] = «Evita»;
$a[] = «Sunniva»;
$a[] = «Tove»;
$a[] = «Unni»;
$a[] = «Violet»;
$a[] = «Liza»;
$a[] = «Elizabeth»;
$a[] = «Ellen»;
$a[] = «Wenche»;
$a[] = «Vicky»;
// get the q parameter from URL
$q = $_REQUEST[«q»];
// lookup all hints from array if $q is different from «»
if ($q !== «») $q = strtolower($q);
$len=strlen($q);
foreach($a as $name) if (stristr($q, substr($name, 0, $len))) if ($hint === «») $hint = $name;
> else $hint .= «, $name»;
>
>
>
>
// Output «no suggestion» if no hint was found or output correct values
echo $hint === «» ? «no suggestion» : $hint;
?>
Примеры отправки 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’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!
Как передать HTML объект аяксом в php-скрипт?
Я хочу передать методом POST php-обработчику HTML-страничку целиком. Начиная от
и заканчивая