Skip to Content
Author's profile photo varun boyina

SAP UI5 – Calling Servlet(which Returns Single Value) using JQUERY AJAX

In this demo I would like to show how to call a servlet in SAP UI5 using JQuery Ajax. Here Servlet returns a single value.

Pre-Requisites for this demo :  

  1. a) Eclipse  with  SAP UI5 Installed
  2. b) Tomcat server 7.0
  3. c) javax.servlet.jar


Step 1 :    Creating Application Project with with java script view.

File -> New->Other-> SAP UI5 Application Development -> Application Project


Capture_1.JPG

Enter project name :  SAPUI5_JQUERY_AJAX_DEMO ,

select library as “sap.ui.commons”

Click Next -> Enter view name as “callServletUsingJqueryAjax”  -> select “Java Script” ->Click Finish


Capture_2.JPG


Step 2:   A new  dynamic web project is created


Capture_3.JPG


Step 3:   Enter the below code in “index.html” .

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

              <meta http-equiv=‘Content-Type’ content=‘text/html;charset=UTF-8’/>

           

              <script src=“resources/sap-ui-core.js”

                           id=“sap-ui-bootstrap”

                           data-sap-ui-libs=“sap.ui.commons”

                           data-sap-ui-theme=“sap_bluecrystal”>

              </script>

              <!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-uilibs‘ if required –>

              <script>

                           sap.ui.localResources(“sapui5_jquery_ajax_demo”);

                           var view = sap.ui.view({id:“idcallServletUsingJqueryAjax1”, viewName:“sapui5_jquery_ajax_demo.callServletUsingJqueryAjax”, type:sap.ui.core.mvc.ViewType.JS});

                           view.placeAt(“jqueryajaxGetUserServletResponse”);

              </script>

       </head>

       <body class=“sapUiBody” role=“application”>

        <form>

Enter Your Name: <input type=“text” id=“userName” />

    </form>

    <br>

    <br>

    <strong>SAP UI5 Demo – Calling Servlet using Jquery Ajax Response</strong>:

    <div id=“jqueryajaxGetUserServletResponse”></div>

           

       </body>

</html>




Step 4:    Enter the below JQuery Ajax code in  “callServletUsingJqueryAjax.view.js”

  1. sap.ui.jsview(“sapui5_jquery_ajax_demo.callServletUsingJqueryAjax”, {

       /** Specifies the Controller belonging to this View.

       * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

       * @memberOf sapui5_jquery_ajax_demo.callServletUsingJqueryAjax

       */

       getControllerName : function() {

              return “sapui5_jquery_ajax_demo.callServletUsingJqueryAjax”;

       },

       /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

       * Since the Controller is given to this method, its event handlers can be attached right away.

       * @memberOf sapui5_jquery_ajax_demo.callServletUsingJqueryAjax

       */

       createContent : function(oController) {

           

              $(document).ready(function() {

                  $(‘#userName’).blur(function(event) {

                          var name = $(‘#userName’).val();

                          $.get(‘GetUserServlet’, {

                                  userName : name

                          }, function(responseText) {

                                  $(‘#jqueryajaxGetUserServletResponse’).text(responseText);

                          });

                  });

              });

       }

});



Step 5:    Import the jar file “javax.servlet.jar”  into WebContent->WEB-INF->lib

Simplest way to do this is to drag and drop “javax.servlet.jar”  file into lib directory.Select  “Copy Files” an press “OK”.


Capture_4.JPG


Step 6 :  In Src folder .create a class file “GetUserServlet.java” in package “com.journaldev.servlets;”. Enter the  following code:

package com.journaldev.servlets;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(“/GetUserServlet”)

public class GetUserServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String userName = request.getParameter(“userName”).trim();

if(userName == null || “”.equals(userName)){

userName = “Guest”;

}

String greetings = “Hello “ + userName;

response.setContentType(“text/plain”);

response.getWriter().write(greetings);

}

}

Capture_5.JPG



Step 7 : Now deploy the project on to  Tomcat server. Right click on “index.html” -> “Run On Server”->Choose “Tomcat Server 7.0” ->Click Finish

Capture_6.JPG


Capture_7.JPG


Enter some text in “Text Box”  and place the cursor on text below.The below page will be displayed:




Capture_8.JPG

Assigned tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Can this SAPUI5 application be deployed to the Fiori Launchpad and properly executed?

      Author's profile photo varun boyina
      varun boyina
      Blog Post Author

      Hi Tom Cole ,

      Sorry for the late reply.

      Yes the above application can be deployed on Sap Hana Cloud Environment.

      Below is the image wherein I have deployed the application on Sap Hana Cloud Environment and response is as expected.

      Response_1.JPG

      Response.JPG

      Author's profile photo LAN XIAO
      LAN XIAO

      good job!

      Author's profile photo varun boyina
      varun boyina
      Blog Post Author

      Thank you Lan Xiao

      Author's profile photo Former Member
      Former Member

      Hi varun,

      i dont have the package com.journaldev.servlets because of what can this posible?

      thanks for your help.

      Captura.JPG

      regards,

      Simón.

      Author's profile photo varun boyina
      varun boyina
      Blog Post Author

      Hi Simon Cabello ,

      Please create the package in "src" folder . Right click on "src" ->New->Java->Package->"enter name "com.journaldev.servlets" , then enter the code in step 6.


      Hope this helps.

      Author's profile photo Former Member
      Former Member

      Hi varun i follow all the steps but eclipse shows me many errors can you help me with this?

      Captura.JPG

      Captura1.JPG

      errors says: -The import javax.servlet.annotation cannot be resolved

                        -WebServlet cannot be resolved to a type

      thank you

      regards,

      Simón

      Author's profile photo varun boyina
      varun boyina
      Blog Post Author

      Hi Simon Cabello ,

      Looks like you have downloaded the older version of "javax.servlet.jar". Please download the  servlet-3_0-final-jar_and_schema or above from online ,remove the old jar and recompile with the new one.

      Regards,

      Varun