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,就這樣，局部刷新就完成了。