js异步刷新局部页面

时间：2024-03-04 09:01:46

真不想说博客园的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,就这样，局部刷新就完成了。

相关文章