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

Ajax Apex

Ajax Apex

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

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

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

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

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

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

Внешний вид таблицы данных

Внешний вид таблицы данных

Создадим простое приложение в которое добавим 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

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

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

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

jQuery код:

Давайте разберемся, в том что выполняет наш код. В первую очередь мы проверяем нажата ли кнопка #P17_CLICK, если кнопка нажата то выполняется функция

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

pAjaxIdentifier – устанавливаем “обработчик пакетов” apex_plugin.get_ajax_identifier PL / SQL. В нашем случае обработчик имеет название “AJAX_GET_DATA”, в котором заключен код PL / SQL.

pData – объект, который необязательно может быть использован для отправки дополнительных значений отправляемых AJAX. Мы используем параметры, которые предоставляет процедура wwv_flow.show  (например, мы можем установить параметры x01 – x10 и массивы f01 – f20).

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

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

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

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

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

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

Создадим “обработчик” AJAX запроса -  главной целью которого, осуществить выборку из БД по заданному ID вернув при этом строку с данными для заполнения наших полей. Для этого в закладке “Page Processing” выберим “AJAX Callbacks” ->”Create”. Так как нам необходимо работать с БД то отмечаем PL/SQL, и вставляем следующий код.

Page Processing

Page Processing

Ajax callbacks

Ajax callbacks

Ajax callbacks

Ajax callbacks

Code Ajax callbacks

Code Ajax callbacks



Здесь все просто, мы объявляем переменную put_callback_data в которой будет результат выборки из таблицы data, поля data, если id равно нашему значению пришедшему посредством AJAX – apex_application.g_x01. Для вывода строки в буфер callback функции используется функция Htp.Prn(put_callback_data).

Если воспользоваться дополнением Firebug ( в Firefox), то можно увидеть, как выглядит сформированный post запрос. Как мы видим в post запросе кроме идентификаторов приложения передается и наше значение в поле x01.

Отпарвка Post запроса с параметрами

Отправка Post запроса с параметрами

А здесь мы видим выдачу ответа от сервера в виде строки, которую мы превращаем в json формат.

Получение данных от Post запроса

Получение данных от Post запроса

В этой статье мы познакомились и рассмотрели простой пример работы AJAX в Apex. С помощью этого примера можно создать большую часть функционала работы с любым количеством данных, не перегружая страницу и осуществляя  быстрый доступ своих пользователей необходимой информации. В следующих статьях мы познакомимся с шаблонами Apex.

P.s. Если вам понравилась статья то вы можете просмотреть рекламму, а я хоть тогда с чем-то выпью кофе;-) Спс!

Обновил статью: Юрий

* По многочисленным просьбам выкладываю исходники f59733

8 Комментари(я,ев)

  • Олег:

    Никак не могу добавить данные в таблицу, выдает ошибку: 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(“”);
    }
    });
    });

  • TY:

    Отличная статья. Только если бы результат был из нескольких строк. Что посоветуете использовать и как можно это сделать.

  • Александр:

    Не могли бы вы мне на почту прислать, чтобы посмотреть как это работает?.

Добавить комментарий