Struts 异步请求(AJAX)的使用、可通用

学习了异步、可进行无页面刷新效果！分享下我写的代码、以供大家参考一下、不足之处望各位老马不要喷水！

效果图：

第一步、新建项目导入需要的包（具体项目结构如图、相应的包附件中有）

第二步、配置web.xml

<font size="3"><filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping></font>

复制代码

第三步、新建实体类（User）

<font size="3">package json.po;
/*
用户类
*/
public class User {
private String uid; //编号
private String name; //姓名
private String sex; //性别
private int age; //年龄
private String address; //地址
//set、get 省略....
}</font>

复制代码

第四步、页面设计

<font size="3"><html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
</head>
<body>
<input type="button" value="获取对象" onclick="user()"/>
<table id="user_tab"></table>
<input type="button" value="获取list" onclick="list()"/>
<table id="list_tab"></table>
<input type="button" value="获取Map值" onclick="map()"/>
<table id="map_tab"></table>
</body>
</html></font>

复制代码

第五步、Action类

<font size="3">public class Test_Action extends ActionSupport {
/**
* @author 等待时候
*
*/
private static final long serialVersionUID = 1L;
private User user; //使用json返回对象
private List<User> list; //使用json返回list
private Map<String,User> map; //使用json返回map
public Map<String, User> getMap() {
return map;
}
public void setMap(Map<String, User> map) {
this.map = map;
}
public List<User> getList() {
return list;
}
public void setList(List<User> list) {
this.list = list;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
//给对象设值
public User returnUser(){
</font><span style="font-size: medium;">User </span><span style="font-size: medium;">user = new User();</span>

复制代码

第六步、Struts配置

<font size="3"><package name="default" namespace="/" extends="struts-default">
<action name="action_*" method="{1}" class="json.action.Test_Action">
<result name="success"/>
</action>
</package></font>

复制代码

第七步、JS页面

<font size="3">//获取对象
function user(){
//$.post(url, [data], [callback], [type]) 具体使用方法参考附件jQuery-api-1.7.1_20120209.chm 帮助文档
/*
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。 function(date){} date用来接收后台返回值，形参
type:返回内容格式，xml, html, script, json, text, _default。
*/
$.post("action_User",function(date){
//显示之前清空、以免重复,否则重复单击按钮时会重复
$("#user_tab").empty();
//添加表格头标题
$("#user_tab").append("<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>地址</th></tr>");
$("#user_tab").append("<tr><td>"+date.uid+"</td><td>"+date.name+"</td><td>"+date.sex+"</td><td>"+date.age+"</td><td>"+date.address+"+ +"</td></tr>");
},"json");
}
//获取list
function list(){
$.post("action_list",function(date){
//显示之前清空、以免重复,否则重复单击按钮时会重复
$("#list_tab").empty();
$("#list_tab").append("<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>地址</th></tr>");
//list存放多个对象、使用循环遍历. 具体使用方法参考附件jQuery-api-1.7.1_20120209.chm 帮助文档
$.each(date,function(i,j){
$("#list_tab").append("<tr><td>"+j.uid+"</td><td>"+j.name+"</td><td>"+j.sex+"</td><td>"+j.age+"</td><td>"+j.address+"</td></tr>");
});
},"json");
}
//获取Map
function map(){
$.post("action_map",function(date){
//显示之前清空、以免重复,否则重复单击按钮时会重复
$("#map_tab").empty();
$("#map_tab").append("<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>地址</th></tr>");
//迭代遍历输出
$.each(date,function(key,value){
$("#map_tab").append("<tr><td>"+value.uid+"</td><td>"+value.name+"</td><td>"+value.sex+"</td><td>"+value.age+"</td>"+ +"<td>"+value.address+"</td></tr>");
});
},"json");
}</font>

复制代码

如果觉得行的话、给个技术分，为进黑马一直在努力......
由于帖子附件大小有限、所有传在360网盘上、希望能够帮助你们

游客，如果您要查看本帖隐藏内容请回复

帐号		自动登录	找回密码
密码			加入黑马

Struts 异步请求(AJAX)的使用、可通用

0 个回复