This is a addon to my previous document titled “SAP UI5 – Calling Servlet(Returning Single Values) using JQUERY AJAX.
In my previous demo I have shown how to call servlet in SAP UI5 using JQuery and Ajax.In the previous demo servlet was returning only single value and demo was not much complex.
However in real time scenarios servlet returns multiple values and is much more complex than the earlier demo.
So In this demo I will show how to call a servlet in SAP UI5 using JQuery Ajax and JSON.
Pre-Requisites for this demo :
- a) Eclipse with SAP UI5 Installed
- b) Tomcat server 7.0
- c) javax.servlet.jar
- d) google’s GSON library (gson-2.3.1.jar)
Step 1 : We will be adding the new html ,view and controller to the existing project
“SAPUI5_JQUERY_AJAX_DEMO” created in previous demo.
Step 2 : Create a new view by following the below steps:
WebContent-> sapui5_jquery_ajax_demo-> Right Click->New-> SAPUI5 Application Development->View->Next-> Enter Name “callServletJqueryAjaxJson”->select Java Script Button->Finish
Step 3: Create a new html.
WebContent->RightClick->New->HTML File-> Enter name “index2.html”->Ensure HTML 5 is selected->Click Finish
Step 4 : Enter the below code in “index2.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:"idcallServletJqueryAjaxJson1", viewName:"sapui5_jquery_ajax_demo.callServletJqueryAjaxJson", type:sap.ui.core.mvc.ViewType.JS});
</script>
</head>
<body class="sapUiBody" role="application">
<h1>SAP UI5 Demo - Calling servlet which returns multiple values using Jquery,Ajax and Json</h1>
<select id="country">
<option>select Team</option>
<option value="India">India Cricket Team</option>
<option value="AUS">Australia Cricket Team</option>
</select>
Select players:
<select id="players">
<option>Select state</option>
</select>
</body>
</html>
Step 5: Enter the below code in “callServletJqueryAjaxJson.view.js”
- sap.ui.jsview("sapui5_jquery_ajax_demo.callServletJqueryAjaxJson", {
/** 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.callServletJqueryAjaxJson
*/
getControllerName : function() {
return "sapui5_jquery_ajax_demo.callServletJqueryAjaxJson";
},
/** 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.callServletJqueryAjaxJson
*/
createContent : function(oController) {
$(document).ready(function() {
$('#country').change(function(event) {
var country=$('select#country').val();
$.get('ActionServlet1',{countryname:country},function(responseJson){
var select=$("#players");
select.find('option').remove();
$.each(responseJson,function(key,value){
$('<option>').val(key).text(value).appendTo(select);
});
});
});
});
}
});
Step 6: Import the jars “gson-2.3.1.jar” and “javax.servlet.jar” into lib folder.
Simplest way is to drag and drop above jar files in the folder WEB-INF->lib-> Select “Copy Files” option and select ok.
Step 7: Create class file .
Src->New->Class->Enter name as “ActionServlet1” and package as “ajaxdemo”->Click Finish.
Enter the below code in ActionServlet1:
package ajaxdemo;
import java.io.IOException;
import java.util.LinkedHashMap;
import java.util.Map;
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("/ActionServlet1")
public class ActionServlet1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String country=request.getParameter("countryname");
Map<String,String> ind=new LinkedHashMap<String,String>();
ind.put("1", "Sachin");
ind.put("2", "Yuvraj");
ind.put("3", "Kohli");
Map<String,String> aus=new LinkedHashMap<String,String>();
aus.put("1", "Ponting");
aus.put("2", "Warne");
aus.put("3", "Clarke");
String json=null;
if(country.equals("India")){
json = new com.google.gson.Gson().toJson(ind);
}else if(country.equals("AUS")){
json = new com.google.gson.Gson().toJson(aus);
}
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
}
Step 8 : Run the application on Tomcat Server 7.
Right click on “index2.html”->Run On Server->Select Existing Configured Tomcat Server.
- SAP Managed Tags:
2 Comments
