Простой пример работы Ajax в APEX

• By Юрий
• 8 February, 2014
• 12 Comments
• Просмотр: 110561

Ajax Apex

Добрый день уважаемые читатели блога Oracle Application Express (Oracle APEX)!

Сегодня мы рассмотрим простой пример работы AJAX в Apex. Иногда очень необходимо получить некоторую часть данных без перезагрузки всей страницы целиком, для этого применяют технологию AJAX. Основная идея данного подхода заключается в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. Как пример мы рассмотрим простой выбор из базы данных полей по заданному нами id.

В первую очередь создадим таблицу базы данных Oracle и назовем её например DATA.

CREATE TABLE  "DATA" 
   (	"ID" NUMBER NOT NULL ENABLE, 
	"DATA" VARCHAR2(100)
   )
/

Эта таблица данных содержит следующие доступные поля:

• ID – айди поля по которому осуществляется выборка данных,
• DATA – поле данные которого представлены в json формате (для хранения в одном поле множества значений)

Вставим демонстрационные данные в нашу базу данных.

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, который выполнится при загрузке страницы, для этого вставим его в поле “Execute when Page Loads“. Код, который выводится заменяет  строку шаблона #GENERATED_JAVASCRIPT# при генерации страницы.

Свойства страницы Home

Область ввода javascript

jQuery код:

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, если кнопка нажата то выполняется функция

apex.jQuery('#P17_CLICK').on('click', function(){/* Выполнить функцию */});

Познакомимся с функцией apex.server.process – эта функция вызывает PL / SQL по требованию процесса, определенного на странице или приложении. Функция является оберткой функции jQuery.ajax и поддерживает все настройки функции jQuery, но предоставляет еще и ряд дополнительных возможностей.

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).

{x01: apex.jQuery('#P17_INPUT').val()},

В нашем случае мы используем параметр x01, для передачи значений нашему обработчику. В этот параметр мы включаем значение введенное в наше поле #P17_INPUT. Теперь переданное значение может быть доступно из PL / SQL с помощью apex_application.g_x01.

pOptions – объект, который необязательно может быть использован для установки дополнительных опций, используемых AJAX. Также используется для получения callback ответа после выполнения функции отправки. По умолчанию возвращаемый тип данных – json, так указано в официальной документации.

See Also: See jQuery documentation of jQuery.ajax for all other available attributes. The attribute dataType is defaulted to json.

Но в процессе написания статьи возник нюанс в работе данной функции. Получить данные как указано в  документации в формате json должным образом не удалось возникала следующая ошибка:

Error: parsererror - SyntaxError: JSON.parse: unexpected keyword

Обойти эти ошибку можно переопределив тип данных на “text”, при этом мы получим данные в виде строки которую уже сможем превратить в объект json формата.

{"name":"Andrey", "value":{"USD":200,"EUR":400, "CAD":100},"index":1}

Второй параметр в строке pOptions определяет функцию с возвращаемым значением в виде строки – pData.

{dataType: "text",success: function( pData ) {}}

Следующие строки кода участвуют в преобразовании строки в json формат, для этого используется jQuery функция jQuery.parseJSON.

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

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