Простой пример работы Ajax в APEX
- By Юрий
- 8 February, 2014
- 12 Comments
- Просмотров: 96067
Ajax Apex
Добрый день уважаемые читатели блога Oracle Application Express (Oracle APEX)!
Сегодня мы рассмотрим простой пример работы AJAX в Apex. Иногда очень необходимо получить некоторую часть данных без перезагрузки всей страницы целиком, для этого применяют технологию AJAX. Основная идея данного подхода заключается в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. Как пример мы рассмотрим простой выбор из базы данных полей по заданному нами id.
В первую очередь создадим таблицу базы данных Oracle и назовем её например DATA.
|
1 2 3 4 5 |
CREATE TABLE "DATA" ( "ID" NUMBER NOT NULL ENABLE, "DATA" VARCHAR2(100) ) / |
Эта таблица данных содержит следующие доступные поля:
- ID – айди поля по которому осуществляется выборка данных,
- DATA – поле данные которого представлены в json формате (для хранения в одном поле множества значений)
Вставим демонстрационные данные в нашу базу данных.
|
1 2 3 4 5 6 7 |
INSERT INTO DATA(ID, DATA) VALUES(1,'{"name":"Andrey", "value":{"USD":200,"EUR":400, "CAD":100},"index":1}'); / INSERT INTO DATA(ID, DATA) VALUES(2,'{"name":"Vadim", "value":{"USD":100,"EUR":200, "CAD":10},"index":0}'); / |
Внешний вид таблицы данных
Создадим простое приложение в которое добавим HTML регион. Для этого выбрав регион, нажмем правой кнопкой и выберем в контекстном меню “Create”, затем выберем тип региона – HTML, и заполним необходимые поля – Title и т.п.
Теперь мы получили Header_region регион в который добавим шесть полей Page Items (правой кнопкой Create Page Items), пять из которых созданы как Text Field, одно поле как Yes/No. Так же создадим одну кнопку по нажатию на которую, будем получать данные из БД, не перегружая при этом веб-страницу, и заполняя существующие поля.
Описание основных полей:
- P17_INPUT – поле ввода ID по которому осуществляется поиск в БД.
- P17_PERSON – поле вывода
- P17_USD – поле вывода валюты
- P17_EUR – поле вывода валюты
- P17_CAD – поле вывода валюты
- P17_INDEX – поле вывода выбора (select для демонстрации)
- P17_CLICK – кнопка
Так как наша задача заключается в том, чтобы получить данные из БД по некоторому ID, и не перегружая страницы посредством AJAX обновить поля, то нам необходимо добавить некий jQuery код, который выполнится по нажатию кнопки #P17_CLICK.
Добавим наш код в поле “JavaScript” в свойствах страницы Home. Введем код JavaScript, который выполнится при загрузке страницы, для этого вставим его в поле ““. Код, который выводится заменяет строку шаблона #GENERATED_JAVASCRIPT# при генерации страницы.
Свойства страницы Home
Область ввода javascript
jQuery код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
apex.jQuery('#P17_CLICK').on('click', function(){ apex.server.process( "AJAX_GET_DATA", {x01: apex.jQuery('#P17_INPUT').val()}, {dataType: "text",success: function( pData ) { var json = {}; json = jQuery.parseJSON(pData); apex.jQuery('#P17_USD').val(json.value.USD); apex.jQuery('#P17_EUR').val(json.value.EUR); apex.jQuery('#P17_CAD').val(json.value.CAD); apex.jQuery('#P17_PERSON').val(json.name); apex.jQuery('#P17_INDEX').val(json.index); console.log(json.value); } }); }); |
Давайте разберемся, в том что выполняет наш код. В первую очередь мы проверяем нажата ли кнопка #P17_CLICK, если кнопка нажата то выполняется функция
|
1 |
apex.jQuery('#P17_CLICK').on('click', function(){/* Выполнить функцию */}); |
Познакомимся с функцией apex.server.process – эта функция вызывает PL / SQL по требованию процесса, определенного на странице или приложении. Функция является оберткой функции jQuery.ajax и поддерживает все настройки функции jQuery, но предоставляет еще и ряд дополнительных возможностей.
|
1 |
apex.server.process( pAjaxIdentifier, pData, pOptions ) |
pAjaxIdentifier – устанавливаем “обработчик пакетов” apex_plugin.get_ajax_identifier PL / SQL. В нашем случае обработчик имеет название “AJAX_GET_DATA”, в котором заключен код PL / SQL.
pData – объект, который необязательно может быть использован для отправки дополнительных значений отправляемых AJAX. Мы используем параметры, которые предоставляет процедура wwv_flow.show (например, мы можем установить параметры x01 – x10 и массивы f01 – f20).
|
1 |
{x01: apex.jQuery('#P17_INPUT').val()}, |
В нашем случае мы используем параметр x01, для передачи значений нашему обработчику. В этот параметр мы включаем значение введенное в наше поле #P17_INPUT. Теперь переданное значение может быть доступно из PL / SQL с помощью apex_application.g_x01.
pOptions – объект, который необязательно может быть использован для установки дополнительных опций, используемых AJAX. Также используется для получения callback ответа после выполнения функции отправки. По умолчанию возвращаемый тип данных – json, так указано в официальной документации.
|
1 |
See Also: See jQuery documentation of jQuery.ajax for all other available attributes. The attribute dataType is defaulted to json. |
Но в процессе написания статьи возник нюанс в работе данной функции. Получить данные как указано в документации в формате json должным образом не удалось возникала следующая ошибка:
|
1 |
Error: parsererror - SyntaxError: JSON.parse: unexpected keyword |
Обойти эти ошибку можно переопределив тип данных на “text”, при этом мы получим данные в виде строки которую уже сможем превратить в объект json формата.
|
1 |
{"name":"Andrey", "value":{"USD":200,"EUR":400, "CAD":100},"index":1} |
Второй параметр в строке pOptions определяет функцию с возвращаемым значением в виде строки – pData.
|
1 |
{dataType: "text",success: function( pData ) {}} |
Следующие строки кода участвуют в преобразовании строки в json формат, для этого используется jQuery функция jQuery.parseJSON.
|
1 2 3 4 5 6 7 |
var json = {}; json = jQuery.parseJSON(pData); //Создаем объект и заполняем все поля данными apex.jQuery('#P17_USD').val(json.value.USD); apex.jQuery('#P17_EUR').val(json.value.EUR); apex.jQuery('#P17_CAD').val(json.value.CAD); apex.jQuery('#P17_PERSON').val(json.name); apex.jQuery('#P17_INDEX').val(json.index); |
Создадим “обработчик” AJAX запроса – главной целью которого, осуществить выборку из БД по заданному ID вернув при этом строку с данными для заполнения наших полей. Для этого в закладке “Page Processing” выберим “AJAX Callbacks” ->”Create”. Так как нам необходимо работать с БД то отмечаем PL/SQL, и вставляем следующий код.
Page Processing
Ajax callbacks
Ajax callbacks
Code Ajax callbacks
|
1 2 3 4 5 6 7 8 |
DECLARE put_callback_data varchar(200); BEGIN select data into put_callback_data from data where id = apex_application.g_x01; Htp.Prn(put_callback_data); END; |
Здесь все просто, мы объявляем переменную put_callback_data в которой будет результат выборки из таблицы data, поля data, если id равно нашему значению пришедшему посредством AJAX – apex_application.g_x01. Для вывода строки в буфер callback функции используется функция Htp.Prn(put_callback_data).
Если воспользоваться дополнением Firebug ( в Firefox), то можно увидеть, как выглядит сформированный post запрос. Как мы видим в post запросе кроме идентификаторов приложения передается и наше значение в поле x01.
Отправка Post запроса с параметрами
А здесь мы видим выдачу ответа от сервера в виде строки, которую мы превращаем в json формат.
Получение данных от Post запроса
В этой статье мы познакомились и рассмотрели простой пример работы AJAX в Apex. С помощью этого примера можно создать большую часть функционала работы с любым количеством данных, не перегружая страницу и осуществляя быстрый доступ своих пользователей необходимой информации. В следующих статьях мы познакомимся с шаблонами Apex.
Обновил статью: Юрий
* По многочисленным просьбам выкладываю исходники f59733
![[Valid RSS]](https://www.stock.zp.ua/wp-content/uploads/2013/02/valid-rss-rogers.png "Validate my RSS feed")
Никак не могу добавить данные в таблицу, выдает ошибку: ORA-00911: invalid character
Добрый день!
Для Вас я подготовил файл и отправил вам на почту с проектом описанным в статье. Вы можете импортировать его в вашем оракле и посмотреть как это работает. Если будут вопросы пишите, чем смогу тем и помогу.
Juriy, ja poluchay oshibku postojano
“jquery syntax error json.parse unexpected character”.
Ya ushe po rasnomu proboval, “json”, “html”, “text” – nichego ne pomogaet! Est Idei?
So swoey oshibkoy rasobralsja!
Vopros drugoy – kak dobavit funkziju obrabotki oshibki, naprimer else du ID=3 vvdedesch, dogda poluchaesh oshibku i snachenija ostautsja. Bilo bi pravilno udalit vse snachenija s poley. Ya vot napisal, no ne rabotaet. Idei?
apex.jQuery(‘#P17_CLICK’).on(‘click’, function(){
apex.server.process( “AJAX_GET_DATA”,
{x01: apex.jQuery(‘#P17_INPUT’).val()},
{dataType: “text”,success: function( pData ) {
var json = {};
json = jQuery.parseJSON(pData);
apex.jQuery(‘#P17_USD’).val(json.value.USD);
apex.jQuery(‘#P17_EUR’).val(json.value.EUR);
apex.jQuery(‘#P17_CAD’).val(json.value.CAD);
apex.jQuery(‘#P17_PERSON’).val(json.name);
apex.jQuery(‘#P17_INDEX’).val(json.index);
}, fail: function ( pData) {
apex.jQuery(‘#P17_USD’).val(“”);
apex.jQuery(‘#P17_EUR’).val(“”);
apex.jQuery(‘#P17_CAD’).val(“”);
apex.jQuery(‘#P17_PERSON’).val(“”);
apex.jQuery(‘#P17_INDEX’).val(“”);
}
});
});
Отличная статья. Только если бы результат был из нескольких строк. Что посоветуете использовать и как можно это сделать.
Спасибо! Выкладываю файлы для импорта урока;-)
Не могли бы вы мне на почту прислать, чтобы посмотреть как это работает?.
Внизу статьи есть ссылка на пример, который вы можете импортировать себе – f59733
SPASIBO ogromennoe!!!!.
Незачто 😉
I just couldn’t depart your website prior to suggesting thazt I xtremely loved the
standard info a person supply to your visitors? Is going to
be again continuously in order to inspect new posts
Hi, at the moment I took a “pause” for a new posts, maybe in future I will rebuild site and will add new interesting posts. Thank you for interesting!