现在使用Json来封装并且传递数据的情形是越来越多了，可怎么样在Struts2中来使用Jquery+Ajax+Json来协同工作呢？在网上查了下就那几个例子被转过来转过去的，还有很多例子根本行不通，这里经过自己摸索写了个小例子。
1、jar包支持
2、Struts配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="ajax" extends="json-default">
<action name="ajaxLogin" class="org.test.action.AjaxLoginAction">
<!-- 返回类型为json 在json-default中定义 -->
<result type="json">
<!-- root的值对应要返回的值的属性 -->
<!-- 这里的result值即是 对应action中的 result -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
3.Action文件
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.TreeMap;
import org.test.action.User;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
public class AjaxLoginAction extends ActionSupport {
private String result;
private String loginName;
private String password;
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public String getLoginName() {
return loginName;
}
public void setLoginName(String loginName) {
this.loginName = loginName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String execute() {
System.out.println("name========="+this.loginName);
System.out.println("password========="+password);
try{
User user1=new User();
user1.setUserName("张三");
user1.setPassword("123");
user1.setAge("22");
User user2=new User();
user2.setUserName("李四");
user2.setPassword("456");
user2.setAge("23");
List<User> list=new ArrayList<User>();
list.add(user1);
list.add(user2);
JSONArray jo=JSONArray.fromObject(list);
System.out.println("action中的JSON======"+jo);
result = jo.toString();
System.out.println("action中的result==="+result);
}catch(Exception e){
System.out.println(e);
}
return SUCCESS;
}
}
4、前台显示页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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=UTF-8">
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
//使用 Ajax 的方式 判断登录
$("#btn_login").click( function() {
var url = 'ajaxLogin.action';
//获取表单值，并以json的数据形式保存到params中
var params = {
loginName:$("#loginName").val(),
password:$("#password").val()
}
//使用$.post方式
$.post(
url, //服务器要接受的url
params, //传递的参数
function cbf(data){ //服务器返回后执行的函数 参数 data保存的是服务器发送到客户端的数据
alert("服务器端返回的data========"+data);
var infoArray = eval("("+data+")"); //包数据解析为json格式
for(var i=0;i<infoArray.length;i++){
//$("#result").append("<tr><td>"+infoArray[i].userName+"</td><td>"+infoArray[i].password+"</td><td>"+infoArray[i].age+"</td></tr>");
$("#"+(i*7+1)).html(infoArray[i].userName+( i*7+1));
$("#"+(i*7+2)).html(infoArray[i].password+( i*7+2));
$("#"+(i*7+3)).html(infoArray[i].age+( i*7+3));
}
},
'json' //数据传递的类型 json
);
});
});
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<span>用户名：</span>
</td>
<td>
<input type="text" id="loginName" name="loginName">
</td>
</tr>
<tr>
<td>
<span>密码：</span>
</td>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="btn_login" value="Login" />
</td>
</tr>
</table>
AJAX返回信息：
<br />
<div id="result" align="center">
<table width="60%" cellpadding="0" cellspacing="0">
<tr><td>用户名</td> <td>密码</td> <td>年龄</td></tr>
<%
for(int i=0;i<2;i++){
%>
<tr><td id="<%=i*7+1 %>"> username(<%=i*7+1 %>)</td> <td id="<%=i*7+2 %>">password(<%=i*7+2 %>) </td> <td id="<%=i*1+3 %>"> age(<%=i*7+3 %>)</td></tr>
<%
}
%>
</table>
</div>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
