上一篇博客,我们提到了如何,利用struts2+jquery+ajax来实现普通json数据的传输,在实际使用中,前台不仅仅显示是逻辑处理后的值。还有从数据库中查询的值,例如hibernate数据库,在查询操作完成后就返回一个List的数据结构,所以,我们需要将List转成json数据类型,并返回到前台,再有JS解析后,显示在页面上。
大部分的代码与上一篇博客的相同,页面也是一个页面
首先建立一个模型类:
Mode.java
package com.action;
public class Mode {
String name;
int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
模型来封装属性,然后构造该模型的泛型List
接下来是action类
DemoListAction.java
package com.action;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
import com.opensymphony.xwork2.ActionSupport;
public class DemoListAction extends ActionSupport {
private String result;
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
List<Mode> list = new ArrayList<Mode>();
Mode m1 = new Mode();
m1.setName("oliver");
m1.setAge(18);
Mode m2 = new Mode();
m2.setName("tommy");
m2.setAge(20);
Mode m3 = new Mode();
m3.setName("thea");
m3.setAge(16);
list.add(m1);
list.add(m2);
list.add(m3);
//转成JSONArray
JSONArray jsonArray = JSONArray.fromObject(list);
//转成String类型,这里要解释,虽然后面的param的type是json,但是并不影响实际参数是字符串
result = jsonArray.toString();
return SUCCESS;
}
}
看看struts.xml,和上一篇的基本一样,直接去复制上一篇的,加上这一段acion的指向
<action name="demolistAction" class="com.action.DemoListAction">
<result type="json">
<!-- 这里的result名字对应着action中jsonObject那个,必须有get,set方法 -->
<param name="root">result</param>
</result>
</action>
接下来就是前台页面了
也与上一篇极其类似,只是多了在前台解析这样的json类型
index.jsp
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="js/jquery.js" type="text/javascript"></script>
<style type="text/css">
.time{
width:300px;
background:#666;
}
.main{
width:300px;
height: 400px;
background: #f60;
}
</style>
<script type="text/javascript">
function btn(){
$.ajax({
//提交方式
type:"post",
//提交的Action
url:"demoAction",
data:{
//提交的数据
name:$("input[name=name]").val(),
age:$("input[name=age]").val()
},
//返回数据类型
dataType:"json",
success:function(data){
//eval()是JS中将JSON的字符串解析成JSON数据格式的一种方法
var str = JSON.stringify(data);
var d = eval(data);
//将解析的de数据放入相应的id中
//alert(str);
$("#s_name").text(""+d.name+"");
$("#s_age").text(""+d.age+"");
},
error:function(data)
{
//失败的话
alert("fail");
},
});
}
function btn2(){
$.ajax({
//提交方式
type:"post",
//提交的Action
url:"demolistAction",
data:{
//提交的数据
},
//返回数据类型
dataType:"json",
success:function(data){
//alert(data);
var data2 = eval(data);
for(var i in data2)
{
//alert(data2[i].name);
$("#main").append("<br/>"+data2[i].name+":"+data2[i].age+"");
}
},
error:function(data)
{
//失败的话
alert("fail");
},
});
}
</script>
</head>
<body>
<div class="time" name="time">
<%
SimpleDateFormat fomatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date currentTime = new Date();
String str = fomatter.format(currentTime);
%>
<%=str %>
</div>
<form action="#" method = "post">
name:<input type="text" name="name"/>
age:<input type="text" name="age"/>
<input type="button" class="btn" value="submit" onclick="btn()"/>
<input type="button" class="btn" value="submit2" onclick="btn2()"/>
</form>
<div class="main" name="main" id="main">
<span id="s_name">nnnn</span>
<span id="s_age">aaaa</span>
</div>
</body>
</html>
着重感受一下,怎么解析Json中的list类型数据,也不是很难。
接下来就是运行截图:
就循环追加到了相应的div了,学会了这种方法就可以简单的异步显示数据库查到的list了。