js异步刷新局部页面
真不想说博客园的Markdown编辑器,我发表到我的个人博客上多好看的一篇文章,发到博客园上格式就成这个鸟样了,哎,不发现到博客首页了,就个人存个档吧
最近在做一个异步刷新页面中的局部,这样做可以防出闪白和已选数据的丢失,话不多说,下面介绍怎么实现的
其中在要实现局部刷新的A.jsp页面中实现代码:
function freshTable(url, beginTime, endTime, selectType, node, page){
$.ajax({
type: "POST",
url: url,
data: {beginTime: beginTime,
endTime: endTime,
selectType: selectType,
node: node,
page: page},
dataType: "html",
cache: false,
async : true,
contentType:"application/x-www-form-urlencoded;charset=utf-8",
success: function(value){
$("#show").html(value);
},
error: function() {
}
});
}
data
是要传给后台的参数,后台以获取这些参数如下所示例:
import javax.servlet.http.HttpServletRequest;//导入的包
//获取页面传递过来的ID
HttpServletRequest request=(HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
String beginTime = request.getParameter("beginTime");//开始时间
String endTime = request.getParameter("endTime");//结束时间
value
是返回页面的源代码
$("#show").html(value);
中show
是要刷新的div的id,如下:
<div id="show"></div>
<action name="ajaxAction" class="AjaxAction">
<result name="success">/B.jsp</result>
</action>
url
可以是.jsp文件,不过我们用ssh框架一般都是传action进去,如果是.jsp文件,那么我们就是从.jsp里生成下面的value
数据。从action进去的话,url
也就是一个action,进入到action后,还是跟平常的一样取list等数据传出来,但传出来的数据不一定是返回A.jsp文件里面,返回哪个页面,这要看你strut.xml文件里面此action的返回是什么了。如果你返回的是A.jsp界面的话,上面的value
数据其实就是A.jsp的源代码。下面我们新建一个B.jsp文件,来接收后台传回来的值且是<div id="show"></div>
要替换的内容
先把struts.xml文件里面的action配返回的界面为B.jsp
这样,我们从后台返回的List数据就传给B.jsp页面了。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<table class="listTable" border="0" cellpadding="0" cellspacing="0">
<s:iterator id="list01" value="warningInfomationList" status="st" var="wil">
<s:if test="#st.index % 2 == 0">
<tr class="normalRow">
</s:if>
<s:else>
<tr class="alternateRow">
</s:else>
<td width="140px">${wil}</td>
<td width="190px">${meter.meter_Name}</td>
<td width="90px">${msgType.warningType_Name}</td>
<td>${content}</td>
</tr>
</s:iterator>
</table>
后台传表给数据给B.jsp页面生成源代码后,此时ajax中的value
等于B.jsp页面的源代码。再经过$("#show").html(value);
传给id号为show的div,就这样,局部刷新就完成了。