Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
varun_boyina
Participant
5,734

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


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



Step 2:   A new  dynamic web project is created



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-ui-libs' 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”.



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

}

}



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



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




8 Comments
Labels in this area