[button align=”left” color=”green” size=”small” link=”http://tech.learnerandtutor.com/send-json-object-to-struts-2-action-by-jquery-ajax”]All technical posts are migrated to www.learnerandtutor.com. Click here to go….[/button][clearline]
[button align=”right” color=”blue” link=”http://tech.learnerandtutor.com/send-json-object-to-struts-2-action-by-jquery-ajax/”]View in English[/button]
To send data from client side to server side, one of the best way is send as JSON object.
Please follow the steps below to achive this.
To do this first we have to enable json compatibility in the struts2 framework. For this modify the struts.xml file as below.
<interceptors>
<interceptor-stack name="defaultStack">
<interceptor-ref name="json">
<param name="enableSMD">true</param>
</interceptor-ref>
</interceptor-stack>
</interceptors>
In the above code we added the json interceptor to the defaultStack. If you have your own stack add the lines below to your stack.
<interceptor-ref name="json">
<param name="enableSMD">true</param>
</interceptor-ref>
Next extend the json package to the default package as below
<package name="default" namespace="/" extends="json-default">
And the last change in the struts.xml file is set the return type as json for the request action.
<action name="writeJSON" class="com.rajesh.json.ReadJSON" method="writeJSON">
<result type="json" />
</action>
That’s all the change for struts2.xml
In our example we are going to send data from the client side to server side. So we will create a json data object with javascript as below.
var dataObj = {
"data": [{
"active": "true",
"color": "orange",
"date": "2008-01-01",
"id": "1",
"name": "Chris"
}, {
"active": "false",
"color": "blue",
"date": "2013-03-03",
"id": "2",
"name": "Kate"
}, {
"active": "true",
"color": "black",
"date": "2013-05-03",
"id": "3",
"name": "Blade"
}, {
"active": "false",
"color": "yellow",
"date": "2013-01-01",
"id": "4",
"name": "Zack"
}]
};
The JSON object syntax will be
{"varName":"value as String"}
In the above code, we created a variable dataObj which has only one variable data. But the variable “data” contains 4 objects. Each object has four variables namely “active”,”color”,”date”, “id” and “name”.
Now we will see how this is getting called in detail. First convert the created object into json object with the below code.
var data1 = JSON.stringify(dataObj);
This line of code will convert the object to json string. If you want to know the difference before and after in detail display it in the console and view in the browser console window like below.
console.log(dataObj); console.log(data1);
Then to send this data to the action write the javascript code below.
$.ajax({
url: "writeJSON.action",
data: data1,
dataType: 'json',
contentType: 'application/json',
type: 'POST',
async: true,
success: function (res) {
console.log(res.data.length);
for (var i = 0; i < res.data.length; i++) {
console.log(" " + res.data[i].name + "-" + res.data[i].id + "-" + res.data[i].active + "- " + res.data[i].date);
}
}
});
When we execute the above code, the struts framework will look the data object then it will find a variable with name “data”. So it will look for the method setData() method in the action class ReadJSON.java. If it is there it will run the code and try to parse the data.
See the action class ReadJSON.java below.
package com.rajesh.json;
import java.util.ArrayList;
import java.util.List;
import com.rajesh.json.Report;
import com.opensymphony.xwork2.ActionSupport;
public class ReadJSON extends ActionSupport {
private static final long serialVersionUID = -6765991741441442190L;
private List < Report > data;
public String writeJSON() {
try {
System.out.println(data.size());
for (int i = 0; i < data.size(); i++) {
System.out.println("Data " + data.get(i).getColor() + "-" + data.get(i).getDate() + "-" + data.get(i).getId() + "-" + data.get(i).getName());
}
System.out.println("Execute Method");
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
public List < Report > getData() {
System.out.println("Getter Call");
return data;
}
public void setData(List < Report > data) {
System.out.println("Setter Call Flow");
this.data = data;
}
}
In the above code we have setData method. So it will try to put our JSON object as parameter for that method. But the variable “data” has array of objects as value. So we will create a java class with name Report and it will have “active”,”color”,”date”, “id” and “name” as it’s members. See below.
package com.rajesh.json;
public class Report {
private int id;
private String name;
private boolean active;
private String date;
private String color;
public Report() {
System.out.println("Inside Constructor with 0 arguments");
}
public Report(int id, String name, boolean active, String date, String color) {
this.active = active;
this.id = id;
this.name = name;
this.color = color;
this.date = date;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isActive() {
return active;
}
public void setActive(boolean active) {
this.active = active;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}
In Report.java we added getter and setter methods for each of the variables why because the struts framework by default will look for set method for each variable. As we mentioned the parameter as List<Report> data in the setData() method it will create an object of Report, then it will try to call setMethod for each variable like setColor(), setDate(),etc.,
That’s all. Now we will initiate the action from the html file as below.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Struts2 - JSON Example</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<h2>Struts2 json & jquery - Demo</h2> <a href="javascript:sendJSONData()">Write</a>
</body>
</html>
To check the output see the output in the Eclipse console. In our example we just displayed in the console. If you want to process just replace those portion as per the need.
Download the complete eclipse project here. Just import in eclipse by “Existing Project into Workspace” and run.
If you have any queries just send a mail to rajeshmepco@gmail.com. We will solve the problem.
