`
xianglg
  • 浏览: 66766 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

struts2+prototype.js实现ajax的无刷新crud操作

    博客分类:
  • ajax
阅读更多
CRUD是Create(创建)、Read(读取)、Update(更新)和Delete(删除)的缩写,除了R,其它每次操作都是对数据库进行了改动,所以,无可避免的要重新对数据库取一遍数据,然后在JSP页面进行显示。如果是无刷新,最笨的方法就是将html代码写到java类里,但如果这样做,你肯定要被扔鸡蛋,下面介绍一种比较容易上手的操作。
首先,我们看一下,仅仅使用struts2,怎么实现CRUD操作。这里,拿删除做例子,其它都雷同。
看一下action类的的内容
public class CRUDAction extends ActionSupport {
	private CRUDEntity crudEntity;//实体Bean

	private List<CRUDEntity> entityList;

	private CRUDService crudService;//实体业务类

	private int cpage = 1;//默认当前页是1

	private static final int pageSize = 10;//每页显示10条

	public void setCrudEntity(CRUDEntity curdEntity){
		this.crudEntity = curdEntity;
	}

	public CRUDEntity getCrudEntity(){
		return this.crudEntity
	}

	public void setCrudService(CRUDService crudService){
		this.crudService = crudService;
	}

	public CURDService getCRUDService(){
		return this.crudService;
	}
	....//其它set,get方法

	/**
	* 分页显示实体信息
	*
	**/
	public 
	public String list(){
		entityList = crudService.pagedQuery(cpage,pageSize);
		return SUCCESS;
	}

	/**
	* 删除实体记录
	*
	**/
	public String delete(){
		if(crudEntity!=null && crudEntity.getId() !=null){//首先判断不为空
			crudService.deleteById(crudEntity.getId());//id是主键
		}
		return SUCCESS;
	}
}

这里service层,使用了spring 的IOC进行了注入。
再看一下,struts.xml配置文件如何写
<action name="list" method="list" class="crudAction">
	<result>/entityManage.jsp</result>
</action>
<action name="delete" method="delete" class="crudAction">
	<result type="redirect-action">list</result>
</action>

配置文件的class也把action类交给了spring管理,但是action类在spring千万不能singleton,否则当多人访问这个action时,你的action就成了有状态的类。举个例子,这里的删除主健id就有可能不是你提交的id。
注意这里的result的type是redirect-action,它表明当删除成功后,直接转向list.action操作,去数据库重新取一遍数据,其实就是response.sendRedirect()。
<%@page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
	<head>
		<title>资源来源管理</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
	</head>
<body>
	<table width="100%" cellspacing="0" cellpadding="0" align="center">
		<tr>
			<th>
				序号
			</th>
			<th>
				名称
			</th>
			...
			<th>
				删除
			</th>
		</tr>
		<s:iterator value="entityList" status="stats">
			<tr>
				<td>
					<s:property value="#stats.count"/>
				</td>
				<td>
					<s:property value="name"/>
				</td>
				...
				<td>
					<s:url action="delete" id="delete">
						<s:param name="crudEntity.id" value="%{id}"/>
					</s:url>
					<s:a href="%{deelte}">
						删除
					</s:a>
				</td>
			</tr>
		</s:iterator>
	</table>
</body>
</html>


到这里,应该很清楚整个流程了吧。如果不使用ajax,则每次点击删除时,重新刷一下页面。如果不想让它刷新呢?怎么办?
其实实现也是很简单的,我们对上面的例子做一点小小的感动。
类文件不用改动,XML配置文件只需改动一点

<action name="list" method="list" class="crudAction">
	<result>/entityManage.jsp</result>
</action>
<action name="show" method="list" class="crudAction">
	<result>/entityManage_main.jsp</result>
</action>
<action name="delete" method="delete" class="crudAction">
	<result type="redirect-action">show</result>
</action>


细心的读者可能比较快发现了已经修改了两处,第一:增加了一个action,原来的list是实体管理显示列表的,而在list之后又增加了一个show.action,但其实是用得Action类的一个方法,目的还是在删除后,重新到数据库里取数据。第二,将原来的delete.action的result改为show,有什么用处,往下看。
主要的改动是jsp和js
通过配置文件,可以观察到多了一个jsp文件,这个jsp文件里面是什么,代码奉上:
entityManage.jsp
<%@page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
	<head>
		<title>资源来源管理</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/prototype.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/application.js"></script>
	</head>
<body>
	<div id="div_entityManage_main">
		<s:include value="entityManage_main.jsp"/>
	</div>
</body>
</html>

与原来的jsp文件比,只是少了显示信息的表格,我已经将这部分代码放到了entityManage_main.jsp中,另外,页面引用了prototype.js文件,我们要在后面的application.js写ajax用到。
entityManage_main.jsp:
<%@page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<table width="100%" cellspacing="0" cellpadding="0" align="center">
	<tr>
		<th>
			序号
		</th>
		<th>
			名称
		</th>
		...
		<th>
			删除
		</th>
	</tr>
	<s:iterator value="entityList" status="stats">
		<tr>
			<td>
				<s:property value="#stats.count" />
			</td>
			<td>
				<s:property value="name" />
			</td>
			...
			<td>
				<s:a href="javascript:delete(%{id})">
						删除
				</s:a>
			</td>
		</tr>
	</s:iterator>
</table>

代码与原来只是修改了删除的链接,原来是链接action,现在是js。
application.js
 function delete(id) {
 		var url = "delete.action?crudEntity.id="+id;
		new Ajax.Updater (
			'div_entityManage_main',
			url, 
			{
				onLoading:function (){
				},
				onSuccess:function (request) {
					alert('删除成功');
				}, 
				onFailure:function (request) {
					alert("服务器故障,请稍候重试");
				}
			}
		);
 }


所有代码全部写好了,整个流程是这样子的
1.用户使用list.action到管理页面
2.用户点击"删除",触发js的delete方法,delete方法将使用ajax提交delete.action
3.action类删除成功后,将转向show.action去数据库重新提取数据,取到的数据在entityManage_main.jsp显示
4.prototype.js将entityManage_main.jsp的代码又写到enttityManage.jsp的ID为"div_entityManage_main"的DIV中
整个过程,是无刷新的,同样,其它操作同理
9
1
分享到:
评论
4 楼 duronshi 2010-03-26  
如果在js里面读取<s:property value..../>

我现在的解决办法是<input type="text" value="<s:propery....


有没有更好的办法实现,我是用jquery来做的。
3 楼 issaczhang 2009-11-15  
请问,如果是带条件的查询,该如何实现无刷新跳转?譬如说我根据姓名查询,查询出来以后我再删除
2 楼 tanyun1111 2009-07-02  
在有sitemesh的情况下这个能做到吗
1 楼 xxrrss 2008-12-15  
受教了,thank you!

相关推荐

Global site tag (gtag.js) - Google Analytics