Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_jquery_call_ajax

Oracle Apex 5 / 18 - Mit JQuery AJAX JSON in einer APEX Seite darstellen

Aufgabe:

In einer JSON Schnittstelle, die ORDS und PL/SQL verwendet um den REST Service zu implementieren, wird eine einfache Admin Oberfläche für den Support benötigt.

Um es dem Support zu erleichtern die einzelnen Aufrufe der Schnittstelle mit diversen Parametern zu testen, wird dazu eine APEX Oberfläche entwickelt.

In der Oberfläche wird der JSON Record der Schnittstelle in der Seite angezeigt, gleichzeitig werden auch die Basis Daten aus der Applikation dargestellt.

Damit kann der Support dann vergleichen, ob die Daten von uns auch richtig ausgelesen wurden und bei Fehler einfacher selber nach Datenfehlern suchen.

Die Verwendung der nativen Möglichkeiten von Apex/Oracle DB kommt nicht nicht Frage, da hier die Architektur von APEX versieht das der Rest Call von der Datenbank aus erfolgen muss. Die DB Maschine muss dazu dann wieder das SSL Zertifikat verarbeiten können und es muss eine Sicherheitsregel in der DB hinterlegt werden. In gehosteten Umgebungen ist das aber meist nicht so einfach umsetzbar.

Lösung:

Der Aufruf der Schnittstelle erfolgt über JQuery.ajax, die diversen Kurzformen und anderen Vorschläge im Internet haben leider nicht das gewünschte Ergebnis gegeben, zumal ich GET und POST für die Schnittstelle verwende und beides einfach funktionieren soll.

Wird mit JQuery.ajax direkt gearbeitet kann einfach auf alle möglichen Settings zugegriffen werden, siehe ⇒ http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings.

In Apex ist es zum Beispiel keine gute Idee den Header einer REST Anfrage mit „$.ajaxSetup“ vor dem Aufruf zu setzen!

Das beeinflusst dann auch alle weiteren APEX internen REST Aufrufe!

Wird so zum Beispiel der Content Type angepasst, gilt das für alle weiteren Calls! Und führt zu sehr merkwürdigen Fehlern in APEX 8-o !


Ein einfaches Beispiel für den notwendigen Code auf einer Seite

Das ganze lässt sich wie immer noch schöner gestalten, z.B. in eine eigene Library auslagern, noch dynamischer etc.

Code für die notwendigen Aufrufe

JavaScript Code für die Seite unter „Page/JavaScript/Function and Global Variable Declaration“ abgelegt:

// page Global
var xapikey  = $v("P200_X_API_KEY");
var pageResultItemName='P200_RESULT';
var pageURLItemName='P200_URL';
 
 
 
//Page Methods for the handling of the results
$.showMyError=function(jqXHR, textStatus, errorThrow){
    var message_text = '<p>Error call URL :: ' + $v(pageURLItemName) + '<p> <p style="color: red; font-size: 3rem;" > Error Code :: ' + jqXHR.status + '</p>';
    $s(pageResultItemName, jqXHR.responseText);
    apex.message.showErrors([  {
                          type     :  "error"
                         ,location : [ "page", "inline" ]
                         ,pageItem : pageResultItemName
                         ,message  : message_text
                         ,unsafe   : false
        }
     ]); 
 }
 
// set my Element on the page
$.setPageItem = function (json) {
    console.log(json);
    var textJson=JSON.stringify(json,undefined, 4);
    $s(pageResultItemName,textJson);  
 }
 
// AJAX Methods for the AJAX Call
 
// before sending something
// show spinner popup
 
 $.onBeforeSend=function(jqXHR ,settings) {
    console.log(settings);
    $.popup = apex.widget.waitPopup();
}
 
// if all was fine 
// Populate the page Item
$.onSucess = function (response) {
    if (response instanceof Object) {
        var json = response;
    }
    else {
       var json = $.parseJSON(response);
    }
    $.setPageItem(json)
 }    
 
// if error happens
// show error Message
 $.onError = function (jqXHR, textStatus, errorThrow) {
     $.showMyError(jqXHR, textStatus, errorThrow) ;
 } 
 
// after all is finshed
// this wil be called also after an error!
// remove the spinner popup
 
 $.onComplete = function (jqXHR,errorStatus) {
      console.log(errorStatus);
      console.log($.popup);
      $.popup.remove();
 }
 
 
 
//
// overwrite JQuery.ajax for our need
//
 
$.gpiJSON = function(url
                    , header
                    , myMethod
                    , data
                    , onBeforeSend
                    , onSucess
                    , onError
                    , onComplete) {
    return jQuery.ajax({
        'method'     :  myMethod
     ,  'url'        : url
     , 'headers'    : header
     , 'contentType': 'application/json'
     , 'data'       : JSON.stringify(data)
     , 'dataType'   : 'json'
     , 'beforeSend' : onBeforeSend
     , 'success'    : onSucess 
     , 'error'      : onError
     , 'complete'   : onComplete
    });
  };

Verwenden

Der Aufruf der Schnittstelle erfolgt über einen Button auf der Seite, das Ergebnis wird in einem Textfeld dargestellt, sehr gut eignet sich dazu dieses Code Mirror Code Editor Plugin für APEX ⇒ https://apex.world/ords/f?p=100:710:16328505602228::::P710_PLG_ID:COM.APEXBYG.BLOGSPOT.CODEMIRROR .

Der Button ist mit einer Dynamic Action verknüpft, bei Click wird JavaScript ausgeführt.

Dargestellt sind nur die notwendigsten Fragmente:

apex.message.clearErrors();
 
.....
 
    if ( call_method == 'POST' ) {
       data={  
            ,  'value'    : wert
 
            };
        //debug - show data
        $s("P200_BODY",JSON.stringify(data,undefined, 4));
 
    }
    else {
        data={};
        $s("P200_BODY",{});
    }    
 
    // define the data Header
    header= {  
                 'x-api-key'     : xapikey   
          ....
            ,    'Content-type'  : 'application/json'   
    };  
 
    //call
    $.gpiJSON (
              url
            , header
            , call_method
            , JSON.stringify(data)
            , $.onBeforeSend
            , $.onSucess
            , $.onError
            , $.onComplete
        );        
}

Quellen

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
"Autor: Gunther Pipperr"
prog/apex_jquery_call_ajax.txt · Zuletzt geändert: 2018/12/10 19:56 von Gunther Pippèrr