OJET GET Record from Database Using the $.ajax JavaScript

How to GET/Display Records from Database Using the $.ajax JavaScript Command OJET



You can Generate the REST Web Service using the ADF, but this may work using the POSTMAN, but while using it in Netbeans it may not work, in that case make sure you are using the below two CROS Origin Jar Library file in your ADF Project.

cors-filter-2.6.jar
java-property-utils-1.9.1.jar

Also include the below code in web.xml in the ADF Project.

<filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
            <init-param>
                <param-name>cors.supportedMethods</param-name>
                <param-value>GET, POST, HEAD, PUT, PATCH, DELETE</param-value>
        </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

Once above two steps are done, RUN the ADF REST Application which will provide the REST web Service/end point as below example.

http://13.0.0.1:7101/ExposeREST-RESTWebService-context-root/rest/1/dept


--------------------------------------------------------------------------------------------------------------------------
Customer.JS
--------------------------------------------------------------------------------------------------------------------------

define(['knockout', 'appController', 'ojs/ojmodule-element-utils', 'accUtils',
    'ojs/ojcore','ojs/ojconverterutils-i18n','ojs/ojarraydataprovider', 'jquery',
    'text!data/Deptment.json','ojs/ojbootstrap','ojs/ojknockout',
    'ojs/ojtable','ojs/ojdatetimepicker','ojs/ojarraytabledatasource','promise'],

function(ko, app, moduleUtils, accUtils,oj,ConverterUtilsI18n,ArrayDataProvider,$,jsonfile,Bootstrap) {

function DashboardViewModel() {
      var self = this;

        self.Department_Id = ko.observable();
        self.Department_Name = ko.observable();
        self.Manager_Id = ko.observable()
        self.Location_ID = ko.observable();
     
     
        $.ajax({
        type: "GET",
        url: "http://127.0.0.1:7101/ExposeREST-RESTWebService-context-root/rest/1/dept/10",
        crossDomain: true,
        success: function (res) {
        self.Department_Id(res.DepartmentId)
        self.Department_Name(res.DepartmentName)
        self.Manager_Id(res.ManagerId)
        self.Location_ID(res.LocationId)
        },
        error: function (jqXHR, textStatus, errorThrown) {
        console.error(jqXHR)
        }
        });
}
return DashboardViewModel;

  }
);

--------------------------------------------------------------------------------------------------------------------------
Customer.html
--------------------------------------------------------------------------------------------------------------------------

<div class="oj-flex oj-sm-flex-direction-column oj-sm-align-items-centeroj-sm-padding-4x">
        <oj-avatar role="img" aria-label="Representative Avatar" size="md"></oj-avatar>
        <h2>Department ID: <input data-bind="textInput: Department_Id"></h2>
        <p>Department Name: <strong data-bind = "text: Department_Name"></strong></p>
        <p>Manager ID: <strong data-bind = "text: Manager_Id"></strong></p>
        <p>Location ID: <strong data-bind = "text: Location_ID"></strong></p>
        </div>

As a result of the above code, the records are picked from the database and displayed on the Screen as below screen shots.