1、所有的数据采用JSON+AJAX的方式实现提交和返回,在struts.xml文件中不采用result进行页面跳转
<package name="default" namespace="/" extends="struts-default">
<action name="dep_*" class="depAction" method="{1}"></action>
</package>
2、在Action页面将查询到的数据转化成JSON格式(liststring),写到网页上
//调用部门业务查询所有部门信息
List<Dep> list = depBiz.getList();
//把部门列表转JSON字符串
String liststring = JSON.toJSONString(list);
try {
//响应对象
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
//输出给页面
response.getWriter().write(liststring);
} catch (IOException e) {
e.printStackTrace();
}
3、在html5网页上通过JSON返回数据并采用easyUI的方式,将数据呈现出来
<meta charset="UTF-8">
<title>部门管理</title>
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<!-- JSON返回数据 -->
<script type="text/javascript">
$(function() {
//grid是要显示数据的id
$('#grid').datagrid({
//dep_list是获取JSON数据的url(本文中是action页面中的一个方法)
url:'dep_list',
columns:[[
{field:'uuid',title:'部门编码',width:100},
{field:'name',title:'部门名称',width:100},
{field:'tele',title:'联系电话',width:100,align:'right'}
]]
});
});
</script>
</head>
<body>
<table id="grid"></table>
</body>
4、注意:代码中引入了easyUI的相关文件