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: {text: 'Текст'}, /* Параметры передаваемые в запросе. */ success: function(data){ /* функция которая будет выполнена после успешного запроса. */ alert(data); /* В переменной data содержится ответ от index.php. */ } });
Или короткая запись через функцию $.get:
$.get('/index.php', {text: 'Текст'}, function(data){ alert(data); });
Код в файле index.php
echo 'Данные приняты - ' . $_GET['text'];
GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр –
cache: false
.
$.ajax({ url: '/index.php', method: 'get', cache: false });
POST
$.ajax({ url: '/index.php', method: 'post', dataType: 'html', data: {text: 'Текст'}, success: function(data){ alert(data); } });
Или функция $.post
$.post('/index.php', {text: 'Текст'}, function(data){ alert(data); });
Код в index.php:
echo 'Данные приняты - ' . $_POST['text'];
POST запросы никогда не кэшируются.
Отправка формы через AJAX
При отправке формы применяется функция serialize()
, подробнее на jquery.com.
Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – {login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}
.
Особенности serialize()
:
- Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
- serialize можно применить только к тегу form и полям формы, т.е.
$('div.form_container').serialize();
– вернет пустой результат.
Пример отправки и обработки формы:
<div class="form_container"> <div id="message"></div> <form id="form"> <input type="text" name="login"> <input type="text" name="password"> <input type="submit" name="send" value="Отправить"> </form> </div> <script> $("#form").on("submit", function(){ $.ajax({ url: '/handler.php', method: 'post', dataType: 'html', data: $(this).serialize(), success: function(data){ $('#message').html(data); } }); }); </script>
Код в файле handler.php:
if (empty($_POST['login'])) { echo 'Укажите логин'; } elseif (empty($_POST['password'])) { echo 'Укажите пароль'; } else { echo 'Авторизация...'; }
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.
Код в 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" });