Jquery функция $.ajaxsetup()
Содержание:
- Содержание раздела:
- Как прочитать данные в формате JSON с помощью jQuery
- 4.1 Показать товары на странице при загрузке
- 4.2 Показать товары при клике на кнопку
- 4.3 Создание функции showProducts()
- 4.4 Получение списка товаров
- 4.5 Создание кнопки «Добавить товар»
- 4.6 Создание HTML-таблицы
- 4.7 Построение строки таблицы для каждой записи
- 4.8 Вставка контента на страницу
- 4.9 Изменение заголовка страницы
- Ошибки при AJAX-запросах
- Добавление html-разметки для модального окна с ответом
- Кратко об Ajax
- Обработка формы обратного звонка с помощью AJAX
- Как обновить данные с помощью jQuery AJAX?
- Что такое AJAX?
- Создание асинхронного AJAX запроса (метод GET)
- Код jQuery
- Запрос XML-файла и обработка ответа
- Напутствие по выбору
Содержание раздела:
Как прочитать данные в формате JSON с помощью jQuery
4.1 Показать товары на странице при загрузке
В папке products откройте файл read-products.js
Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.
Функция showProducts() покажет список продуктов в виде HTML-таблицы. Поместите следующий код в файл read-products.js.
4.2 Показать товары при клике на кнопку
Следующий код вызовет метод showProducts() при нажатии кнопки с классом кнопки read-products-button.
Кнопку можно найти в HTML-шаблонах «Создать товар и «Обновить товар. Мы увидим это в следующих разделах.
Поместите следующий код под showProducts(); предыдущего раздела.
4.3 Создание функции showProducts()
Теперь мы создадим метод showProducts(). Замените комментарий // здесь будет метод showProducts() в файле read-products.js следующим кодом.
4.4 Получение списка товаров
Следующий код свяжется с нашим API, чтобы получить список продуктов в формате JSON. Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
4.5 Создание кнопки «Добавить товар»
Мы должны добавить кнопку «Создать продукт» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
4.6 Создание HTML-таблицы
Мы должны начать строить HTML-таблицу, в которой появится список продуктов.
Следующий код создаст HTML-таблицу с ее заголовком. Разместите его после кода предыдущего раздела.
4.7 Построение строки таблицы для каждой записи
Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.
Помимо данных о товаре, строка таблицы также будет иметь кнопки «Действие». К ним относятся кнопки «Read One», «Редактировать» и «Удалить».
Замените комментарий // здесь будут строки следующим кодом.
4.8 Вставка контента на страницу
Мы должны сделать так, чтобы HTML-таблица появилась на нашей веб-странице. Мы сделаем это, выводя таблицу в div page-content.
Поместите следующий код после закрывающего тега table
4.9 Изменение заголовка страницы
Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.
Поместите следующий код после кода предыдущего раздела.
Ошибки при AJAX-запросах
К сожалению, не все бывает так радужно с первого раза. Довольно часто в консоли вы можете наблюдать 500-ю ошибку (Internal Server Error). Как правило, она возникает тогда, когда есть ошибки в PHP-коде.
Например, эта возникла, когда в 4-й строке вместо знака стоял знак в записи ) . Не хватало всего-навсего угловой скобки, но это та синтаксическая ошибка, которая не дает выполнить скрипт.
Узнать подробнее об ошибках вы можете из файла error_log, который автоматически формируется на сервере в той папке, где произошла ошибка.
Ошибка в PHP-коде
PHP
PHP Parse error: syntax error, unexpected ‘=’, expecting :: (T_PAAMAYIM_NEKUDOTAYIM) in /ajax/php/test-ajax.php on line 4
| 1 | PHP Parse errorsyntax error,unexpected’=’,expecting::(T_PAAMAYIM_NEKUDOTAYIM)inajaxphptest-ajax.php on line4 |
Кроме того, у вас может возникнуть 403 ошибка в том случае, если доступ к каким-то файлам или папкам на сервере у вас ограничен.
Особенности AJAX-запросов в jQuery 3-й версии
В официальной документации по вы найдете информацию о том, что функции , и заменены на , и .
ajax в jQuery v3
Однако, код, приведенный выше с использованием функций и вполне работоспособный: запрос отправляется и ответ от сервера возвращается. Происходит это потому, что данные функции являются свойствами объекта , а не его методами. Deprecated (устаревшими) являются методы изменения состояния AJAX , и для объекта JQuery XML HTTP Request (jqXHR), которые действительно устарели.
Тем не менее, вы можете перейти к рекомендуемым функциям и несколько переделать код js-файла таким образом:
if ($(‘input»]:checked’).length == 0) {
alert(«Выберите хотя бы один пункт!»);
return false;
}
$.ajax({
url: testForm.attr(‘action’),
type: ‘POST’,
data: testForm.serialize(),
dataType: ‘html’,
beforeSend: function() {
$(‘.loader’).show();
}
}).done(function(result) {
$(«.small-width tbody»).html(result);
}).always(function() {
$(‘.loader’).hide();
});
return false;
});
})
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$(document).ready(function(){ let testForm=$(‘#testForm’); testForm.submit(function(){ if($(‘#username’).val().length<5){ alert(«Введите не менее 5 символов!»); $(‘#username’).focus(); returnfalse; } if($(‘#useremail’).val().length<5){ alert(«Введите не менее 5 символов!»); $(‘#useremail’).focus(); returnfalse; } if($(‘input»]:checked’).length==){ alert(«Выберите хотя бы один пункт!»); returnfalse; } $.ajax({ urltestForm.attr(‘action’), type’POST’, datatestForm.serialize(), dataType’html’, beforeSendfunction(){ $(‘.loader’).show(); } }).done(function(result){ $(«.small-width tbody»).html(result); }).always(function(){ $(‘.loader’).hide(); }); returnfalse; }); }) |
Второй пример с использованием функций и (открыть в новой вкладке):
Обратите внимание, что синтаксис этих функция несколько иной, т.к. используется технология промисов, которая позволяет назначать несколько обратных вызовов для одного запроса, например, так:. Вызов нескольких функций done()
JavaScript
var somerequest = $.ajax({ ..
});
somerequest.done(function(data) { /* Код 1 */ });
somerequest.done(function(data) { /* Код 2 */ });
Вызов нескольких функций done()
JavaScript
var somerequest = $.ajax({ … });
somerequest.done(function(data) { /* Код 1 */ });
somerequest.done(function(data) { /* Код 2 */ });
|
1 2 3 |
varsomerequest=$.ajax({…}); somerequest.done(function(data){/* Код 1 */}); somerequest.done(function(data){/* Код 2 */}); |
Так что выбор способа описания функций остается за вами.
Еще один пример использования метода jQuery вы можете найти в статье «Ajax-запросы с помощью jQuery 3-й версии и модального окна Bootstrap 4».
Просмотров:
135
Добавление html-разметки для модального окна с ответом
Для того чтобы вывести сообщение о получении заявки на обратный звонок от пользователя, заполнившего нашу форму, мы воспользуемся разметкой для создания:
html-код для модального окна с помощью Bootstrap 4
<body>
<!— Modal —>
<div class=»modal fade» id=»messageModal» tabindex=»-1″ role=»dialog» aria-labelledby=»messageModal»
aria-hidden=»true»>
<div class=»modal-dialog» role=»document»>
<div class=»modal-content»>
<div class=»modal-body text-center»>
<button type=»button» class=»close» data-dismiss=»modal» aria-label=»Close»>
<span aria-hidden=»true»>×</span>
</button>
<h3 class=»mt-4 mb-5 modal-title»>Спасибо за вашу заявку</h3>
<div class=»mb-4″>
<p class=»date»></p>
<p>Наш менеджер свяжется с вами
<br>в самое ближайшее время.</p>
</div>
<button type=»submit» value=»ok» class=»btn btn-danger btn-round mb-5″
data-dismiss=»modal»>Ок</button>
</div>
</div>
</div>
</div>
<!— /Modal —>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body> <!—Modal—> <div class=»modal fade»id=»messageModal»tabindex=»-1″role=»dialog»aria-labelledby=»messageModal» aria-hidden=»true»> <div class=»modal-dialog»role=»document»> <div class=»modal-content»> <div class=»modal-body text-center»> <button type=»button»class=»close»data-dismiss=»modal»aria-label=»Close»> <span aria-hidden=»true»>×<span> <button> <h3 class=»mt-4 mb-5 modal-title»>Спасибозавашузаявку<h3> <div class=»mb-4″> <pclass=»date»><p> <p>Нашменеджерсвяжетсясвами <br>всамоеближайшеевремя.<p> <div> <button type=»submit»value=»ok»class=»btn btn-danger btn-round mb-5″ data-dismiss=»modal»>Ок<button> <div> <div> <div> <div> <!—Modal—> |
Для нас здсь важным будет атрибут . Текст для пользователя будет выведен в . Внутри этого элемента мы разместим абзац , который изначально не имеет текста. В него мы будем добавлять строку о дате и времени получения заявки. Это необязательно на реальном сайте, но в нашем примере покажет, как обращаться к элементам модального окна и менять в нем текст.
Кратко об Ajax
Если вы новичок в Ajax, позвольте вкратце рассказать вам о том, что такое асинхронные запросы
Это важно знать, поскольку асинхронные запросы занимают в Ajax центральное место, а буква А в Ajax происходит от слова asynchronous
Как программист большую часть времени вы тратите на написание синхронного кода. Вы определяете блок кода, решающий некоторую задачу, и остальная часть программы ждет, пока этот блок не выполнится. Задача завершается выполнением последнего оператора блока. На то время, пока выполняется блок, браузер лишает пользователя возможности взаимодействовать с содержимым веб-страницы.
Если же задача выполняется асинхронно, то вы сообщаете браузеру, что намерены выполнить определенную работу в фоновом режиме. Выражение «в фоновом режиме» звучит довольно туманно, но для браузера оно означает следующее: «Выполни это так, чтобы пользователь в течение всего времени мог взаимодействовать с документом, и сообщи мне, когда все будет сделано».
В случае Ajax вы приказываете браузеру связаться с веб-сервером и сообщить вам, когда запрос будет выполнен. Управление этой связью осуществляется с помощью функций обратного вызова (callback functions). Вы предоставляете браузеру одну или несколько функций, которые должны быть вызваны сразу же по завершении выполнения задачи. Должна быть предусмотрена функция, которая обработает успешный запрос, а кроме того, могут существовать функции, выполняющиеся в случае других исходов, например при возникновении ошибок.
Преимущество асинхронных запросов состоит в том, что они позволяют создавать функционально насыщенные HTML-документы, которые могут непрерывно обновляться на основании полученных от сервера ответов, не прерывая взаимодействия пользователя с приложением и не заставляя его дожидаться окончания полной загрузки документа.
Недостатком такого подхода является то, что он требует тщательного продумывания кода. Нельзя заранее сказать, когда именно будет выполнен асинхронный запрос, и вы не имеете права делать какие-либо предположения относительно возможного исхода запроса
Кроме того, использование функций обратного вызова приводит к созданию еще более сложного кода, который только и ждет, чтобы «наказать» программиста, неосторожно сделавшего какие-либо предположения относительно возможного исхода запроса или времени его выполнения
Обработка формы обратного звонка с помощью AJAX
В нашем примере мы используем всего 2 текстовых поля — для имени пользователя и для телефона, т.к. отсылать будем сообщение об обратном звонке. Оформлять будем пример с использованием классов фреймворка Bootstrap 4, т.к. нам будет необходимо вывести сообщение об отправке формы в модальном окне. Поэтому разметка нашего файла будет основана на стандартном шаблоне Bootstrap 4:
Шаблон html-страницы для создаия формы
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Отправка формы с помощью Ajax и jQuery 3.4.1</title>
<meta name=»msapplication-TileImage» content=»//html-plus.in.ua/wp-content/uploads/2018/10/cropped-favicon1-270×270.png» />
<link rel=»stylesheet» href=»css/bootstrap.min.css»>
<link rel=»stylesheet» href=»css/form-ajax-style.css»>
</head>
<body>
<section id=»order»>
<div class=»overlay»></div>
<div class=»container relative»>
<h2 class=»text-center text-white mb-5″>Оставьте заявку<br>
и получите <span class=»text-danger»>скидку 15%</span></h2>
<form action=»mail.php» class=»px-5 mx-sm-5 order-form» method=»post»>
<div class=»form-row text-center justify-content-around flex-sm-wrap»>
<div class=»mb-4″>
<input type=»text» class=»btn-round» name=»name» required placeholder=»Имя*»>
<div class=»error hidden»></div>
</div>
<div class=»mb-4″>
<input type=»tel» class=»btn-round» name=»phone» required placeholder=»Телефон*»>
<div class=»error hidden»></div>
</div>
<div>
<button type=»submit» class=»btn btn-danger btn-round»>
Заказать обратный звонок →</button>
</div>
</div>
</form>
</div>
</section>
<script src=»https://code.jquery.com/jquery-3.4.1.min.js»></script>
<script src=»js/bootstrap.min.js»></script>
<script src=»js/jquery-input-mask-phone-number.min.js»></script>
<script src=»js/form-send.js»></script>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»UTF-8″> <title>ОтправкаформыспомощьюAjaxиjQuery3.4.1<title> <meta name=»msapplication-TileImage»content=»//html-plus.in.ua/wp-content/uploads/2018/10/cropped-favicon1-270×270.png»> <link rel=»stylesheet»href=»css/bootstrap.min.css»> <link rel=»stylesheet»href=»css/form-ajax-style.css»> <head> <body> <section id=»order»> <div class=»overlay»><div> <div class=»container relative»> <h2 class=»text-center text-white mb-5″>Оставьтезаявку<br> иполучите<span class=»text-danger»>скидку15%<span><h2> <form action=»mail.php»class=»px-5 mx-sm-5 order-form»method=»post»> <div class=»form-row text-center justify-content-around flex-sm-wrap»> <div class=»mb-4″> <input type=»text»class=»btn-round»name=»name»required placeholder=»Имя*»> <div class=»error hidden»><div> <div> <div class=»mb-4″> <input type=»tel»class=»btn-round»name=»phone»required placeholder=»Телефон*»> <div class=»error hidden»><div> <div> <div> <button type=»submit»class=»btn btn-danger btn-round»> Заказатьобратныйзвонок→<button> <div> <div> <form> <div> <section> <script src=»https://code.jquery.com/jquery-3.4.1.min.js»></script> <script src=»js/bootstrap.min.js»></script> <script src=»js/jquery-input-mask-phone-number.min.js»></script> <script src=»js/form-send.js»></script> <body> <html> |
В этом коде есть ряд моментов, на которые стоит обратить внимание:
- Тег имеет в атрибуте несколько наименований классов, отвечающих за форматирование, но класс нужен будет нам для обращения к этой форме в JS;
- Еще одним атрибутом тега является , который указывает на название файла, обрабатывающего данные формы на сервере. Файл лежит в той же папке, то и html-файл, и нужен для того, чтобы отправить письмо даже в том случае, если JS по каким-то причинам не загрузится или не сработает, например, при наличии в нем ошибок.
- В тегах у нас существуют атрибуты для имени пользователя и для его телефона. Данные на сервер уходят в виде пар , поэтому этот атрибут важен для передачи данных как с помощью Ajax, так и обычным способом.
-
После каждого из тегов input находятся блоки для того, чтобы вывести замечания пользователю, если он неверно заполнил поля. Изначально эти блоки спрятаны от пользователя. Стили для них просты:
Стили для вывода ошибок
.error {
color: #f00;
font-weight: 600;
}.hidden {
display: none;
}1
2
3
4
5
6
7
8.error{
color#f00;
font-weight600;
}
.hidden{
displaynone;
}
- Кнопка, которая отправляет форму на сервер, имеет атрибут , то есть позволяет нам при клике на ней обработать событие onsubmit, и , который мы будем использовать в скрипте.
Как обновить данные с помощью jQuery AJAX?
7.1 Обработчик кнопки «Обновление товара»
Кнопка «Редактировать» находится в списке товаров. При нажатии на неё должна отображаться форма для обновления товара, заполненная информацией о нём.
В папке app/products откройте файл update-product.js и добавьте следующий код.
7.2 Получение информации о товаре
Чтобы заполнить нашу HTML-форму для обновления товара, нам нужно получить информацию о продукте из API.
Поместите следующий код после кода получения id товара.
7.3 Получение списка категорий
Список категорий необходим для вариантов категорий товаров. Записи категорий будут отображаться как параметры в поле ввода «select» HTML.
Замените комментарий // здесь будет загрузка списка категорий следующим кодом
7.4 Добавление кнопки «Все товары» и показ формы для обновления товара
Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку продуктов.
Так же мы создадим HTML-форму для обновления товара. Эта форма будет построена с таблицей HTML, а поля ввода заполнены информацией о продукте.
Вместо комментария // здесь будет HTML для обновления товара вставьте следующий код.
Что такое AJAX?
AJAX расшифровывается как асинхронный JavaScript и XML и позволяет асинхронно извлекать контент с внутреннего сервера без обновления страницы. Таким образом, он позволяет обновлять содержимое веб-страницы без перезагрузки.
Давайте рассмотрим пример, чтобы понять, как вы можете использовать AJAX в повседневной разработке приложений. Скажем, вы хотите создать страницу, которая отображает информацию профиля пользователя, с различными разделами, такими как личная информация, социальная информация, уведомления, сообщения и так далее.
С другой стороны, вы также можете использовать AJAX для создания интерфейса, который загружает всю информацию без обновления страницы. В этом случае вы можете отобразить разные вкладки для всех разделов, и, нажав на вкладку, он извлекает соответствующее содержимое с внутреннего сервера и обновляет страницу, не обновляя браузер. Это поможет вам улучшить общее восприятие конечного пользователя.
Общий вызов AJAX работает примерно так:
Давайте быстро пройдемся по обычному потоку AJAX:
- Сначала пользователь, как обычно, открывает веб-страницу синхронным запросом.
- Затем пользователь нажимает на элемент DOM — обычно кнопку или ссылку — который инициирует асинхронный запрос к серверу. Конечный пользователь не заметит этого, поскольку вызов выполняется асинхронно и не обновляет браузер. Однако вы можете распознать эти AJAX-вызовы с помощью такого инструмента, как Firebug.
- В ответ на запрос AJAX сервер может вернуть данные строки XML, JSON или HTML.
- Данные ответа анализируются с использованием JavaScript.
- Наконец, проанализированные данные обновляются в DOM веб-страницы.
Итак, как вы можете видеть, веб-страница обновляется данными в реальном времени с сервера без перезагрузки браузера.
В следующем разделе мы расскажем, как реализовать AJAX с использованием ванильного JavaScript.
Создание асинхронного AJAX запроса (метод GET)
Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать
пользователя и отображать его IP-адрес.
Для этого необходимо создать на сервере 2 файла в одном каталоге:
-
– HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента. -
– PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ.
Начнём разработку с создания основной структуры файла
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пример работы AJAX</title> </head> <body> <h1>Пример работы AJAX</h1> <div id="welcome"></div> <script> // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы </script> </body> </html>
Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):
-
Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные
никакие не нужны, то данный этап можно пропустить. -
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
-
Настроим запрос с помощью метода .
Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
-
Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
.Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
. Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
иначе произошла ошибка (например, 404 – URL не найден). -
Отправим запрос на сервер с помощью метода .
Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они
передаются в составе URL.Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу
. Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы
сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.
Содержимое элемента :
// 2. Создание переменной request
var request = new XMLHttpRequest();
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
request.addEventListener('readystatechange', function() {
// если состояния запроса 4 и статус запроса 200 (OK)
if ((request.readyState==4) && (request.status==200)) {
// например, выведем объект XHR в консоль браузера
console.log(request);
// и ответ (текст), пришедший с сервера в окне alert
console.log(request.responseText);
// получить элемент c id = welcome
var welcome = document.getElementById('welcome');
// заменить содержимое элемента ответом, пришедшим с сервера
welcome.innerHTML = request.responseText;
}
});
// 5. Отправка запроса на сервер
request.send();
В итоге файл будет иметь следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пример работы AJAX</title>
</head>
<body>
<h1>Пример работы AJAX</h1>
<div id="welcome"></div>
<script>
window.addEventListener("load",function() {
var request = new XMLHttpRequest();
request.open('GET','processing.php',true);
request.addEventListener('readystatechange', function() {
if ((request.readyState==4) && (request.status==200)) {
var welcome = document.getElementById('welcome');
welcome.innerHTML = request.responseText;
}
});
request.send();
});
</script>
</body>
</html>
На сервере (с помощью php):
- Получим данные. Если данные посланы через метод , то из глобального массива
. А если данные переданы с помощью метода , то из глобального
массива . - Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ.
Выведем его с помощью .
<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
$output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
$output .= 'Ваш IP адрес неизвестен.';
}
echo $output;
Код jQuery
Вот что делает наш код jQuery — он получает информацию для элемента выбора в виде JSON с сервера, генерирует разметку HTML и устанавливает обработчики событий для отслеживания изменений. Если элемент выбора меняется, то процесс повторяется с новыми пунктами.
В коде используется две функции JavaScript:
- refreshSelects запускает плагин Chosen и привязывает обработчики событий каждый раз, когда новый пункт добавляется на страницу;
- fetchSelect запрашивает фид JSON с сервера и генерирует разметку для ответа.
assets/js/script.js
$(function(){
var questions = $('#questions');
function refreshSelects(){
var selects = questions.find('select');
// Улучшаем элемент selects с помощью плагина Chose
selects.chosen();
// Ждем изменений
selects.unbind('change').bind('change',function(){
// Выбранная опция
var selected = $(this).find('option').eq(this.selectedIndex);
// Ищем атрибут data-connection
var connection = selected.data('connection');
// Удаляем следующий контейнер li (к=если есть)
selected.closest('#questions li').nextAll().remove();
if(connection){
fetchSelect(connection);
}
});
}
var working = false;
function fetchSelect(val){
if(working){
return false;
}
working = true;
$.getJSON('ajax.php',{key:val},function(r){
var connection, options = '';
$.each(r.items,function(k,v){
connection = '';
if(v){
connection = 'data-connection="'+v+'"';
}
options+= '<option value="'+k+'" '+connection+'>'+k+'</option>';
});
if(r.defaultText){
// Плагин Chose требует, чтобы был добавлен пустой элемент опции
// если нужно выводить текст "Пожалуйста, выберите"
options = '<option></option>'+options;
}
// Строим разметку для раздела select
$('<li>\
<p>'+r.title+'</p>\
<select data-placeholder="'+r.defaultText+'">\
'+ options +'\
</select>\
<span class="divider"></span>\
</li>').appendTo(questions);
refreshSelects();
working = false;
});
}
$('#preloader').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
// В начале загружаем выбор продукта
fetchSelect('productSelect');
});
Отлично! Теперь осталось сделать генерацию фида JSON
Обратите внимание, что функция fetchSelect получает в качестве аргумента строку. Это ключ, который передается в код PHP, обозначающий, какой набор пунктов нам требуется
Вот как выглядит простой ответ из нашего скрипта PHP:
{
"items": {
"Телефоны": "phoneSelect",
"Ноутбуки": "notebookSelect",
"Планшеты": ""
},
"title": "Что желаете купить?",
"defaultText": "Выберите категорию продукта"
}
Функция fetchSelect проходит циклом все пункты и использует ключи как содержание элементов опций, а значения — как указатели на следующие пункты. Выбор пунктов «Телефоны» и «Ноутбуки» в данном примере будет приводить к генерации новых элементов выбора, а пункта «Планшеты» — нет.
Запрос XML-файла и обработка ответа
Теперь, когда мы рассмотрели основные различия между традиционными запросами JavaScript и запросами Ajax jQuery, можно пойти дальше и запросить реальный файл XML.
Запрашиваемый XML-файл – он показан в листинге 4 – включает в себя элементы , и , которые соответствуют этой статье и используются для визуализации простой HTML-страницы с заголовком, описанием и гиперссылкой на .
Листинг 4.
Пример XML-файла для Ajax-запроса с применением jQuery
<?xml version="1.0" encoding="UTF-8"?>
<content>
<header>Improving Ajax Development with jQuery</header>
<description>It's no surprise that Ajax is a great way to enhance a web
application. However, sometimes the code that needs to be written can take more
time than traditional development techniques, especially when you're interacting
with dynamic server-side data sets. Luckily, with the introduction of jQuery there's
now a quicker and more robust way to write JavaScript and Ajax. The suite of Ajax
functionality available through jQuery makes Ajax development much easier than the
past by allowing you to write less code and by lending additional methods and event
handlers to cover any situation. The amount of code that needs to be written with
jQuery is very minimal, even when developing complex functionality, so development
is a lot faster. With these tools Ajax is becoming a more viable option when
developing a website or application, even on a tight deadline.</description>
<sourceUrl>
http://articles.studiosedition.com/ibm/improving_ajax/ImprovingAjaxDevWithJQuery.zip
</sourceUrl>
</content>
Первое, что нужно сделать, чтобы запросить и разобрать этот XML-файл, – это внедрение библиотеки jQuery.
В идеале нужно включить в свой специальный код отдельный файл JavaScript, но для целей данной статьи код JavaScript содержится в примере HTML.
Чтобы все элементы страницы полностью загрузились и были доступны для языка JavaScript, сделаем запрос Ajax тогда, когда страница будет полностью загружена.
В jQuery есть простое событие , которое можно использовать для этой функции:
применим его к объекту document.
При запуске события вызывается соответствующая функция, и можно приступать к запросу Ajax.
Этот процесс используется во всех примерах из этой статьи, чтобы гарантировать доступность всего, что находится в пределах страницы.
Когда страница готова, можно сформировать Ajax-запрос с помощью jQuery.
Как видно из листинга 5, запрос похож на тот, что мы уже видели, но теперь обрабатываются успешные и ошибочные ответы.
Листинг 5.
Запрос и разбор XML-файла с помощью Ajax и jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Improving Ajax Development with jQuery</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'data/content.xml',
success: function(xml) {
var header = description = sourceUrl = '';
var content = xml.getElementsByTagName('content');
for(var i=0; i<content.length; i++) {
for(var j=0; j<content.childNodes.length; j++) {
switch(content.childNodes.nodeName) {
case 'header':
header = content.childNodes.firstChild.data;
break;
case 'description':
description = content.childNodes.firstChild.data;
break;
case 'sourceUrl':
sourceUrl = content.childNodes.firstChild.data;
break;
default:
//
}
}
}
$("body").append('<h1>'+header+'</h1>');
$("body").append('<p>'+description+'</p>');
$("body").append('<a href="'+sourceUrl+'">Download the source</a>');
},
error: function(xhr, status, err) {
// Обработка ошибок
}
});
});
</script>
</head>
<body>
</body>
</html>
Событие получает три аргумента: , и .
Единственный параметр, который используются в этой статье ― .
В примере он назван , чтобы было легко определить, что в качестве ответа возвращаются XML-данные.
По файлу XML мы знаем, что можно ожидать , и , поэтому пройдемся по параметрам в файле и присвоим эти значения соответствующим переменным.
Когда все переменные получили значения, можно обработать данные как HTML, добавив каждый элемент к телу HTML-страницы и применив базовое форматирование.
Если запрос оказался неудачным, будет запущено событие , которое представлено тремя аргументами:
, и .
Параметр должен быть фактическим объектом; – это строка, которая описывает тип ошибки, а параметр – это необязательный объект исключения.
