Ajax请求返回一个页面，实现页面局部刷新

最新推荐文章于 2022-04-17 09:21:00 发布

刘正权

最新推荐文章于 2022-04-17 09:21:00 发布

阅读量2.9w

点赞数 3

文章标签： Ajax局部刷新

本文链接：https://blog.csdn.net/liu765023051/article/details/45308827

版权

本文实现Ajax的局部刷新。思路如下：

首先，从JSP页面A.jsp向服务端发起一个Ajax请求，由Action中方法MethodA处理，该MethodA方法进行数据组装后，返回一个jsp页面Result.jsp，然后在Ajax的返回结果中，将Result.jsp元素，渲染到A.jsp中。

如图：

A.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>

<script type="text/javascript" src="/end/js/jquery-1.7.1.js"></script>
<script type="text/javascript">
	$(function() {
		$("#search").click(function() {
			$.ajax({
				type : 'post',
				async : true,
				url : '/end/app/offlinerepay/offlineRepay.shtml?orderId=' + $("#orderId").val(),
				cache : false,
				success : function(data) {
					$("#id_ul").remove();
					$("#id_total").empty();
					$("#id_right").empty();
					$("#id_left").prepend($(data).find("#id_ul"));
					$("#id_total").append($(data).find("#id_total"));
					$("#id_right").append($(data).find("#id_form"));
					}
			});
		});
	})
</script>

</head>
<body>
	<div class="container">
		<div class="container-top" id="queryDiv">
			<div class="search">
				<input type="text" placeholder="输入订单号" id="orderId">
				<button id="search">Search</button>
			</div>
		</div>
		<div id="id_left" class="container-left">
			<div class="total" id="id_total"></div>
		</div>
		<div id="id_right" class="container-right"></div>
	</div>
</body>
</html>

Action类：

public class TestAction  extends ActionSupport {
	
	private static final long serialVersionUID = -2577849709861478091L;

	private OrderService orderService;
	
	public String toOfflineRepay(){
		return SUCCESS;
	}
	
	public String offlineRepay() throws Exception{
		HttpServletRequest request = ServletActionContext.getRequest();
		List<Order> osps = null;
		request.setAttribute("osps", osps);
		return SUCCESS;
	}
}

Result.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<div class="container-left" id="id_left">
	<ul id="id_ul">
		<c:forEach items="${osps}" var="item" varStatus="status">
			<li>${status.index} </li>
		</c:forEach>
	</ul>
	<div class="total" id="id_total">
		<p>
			<span><b id="totalMoney">123</b></span>
		</p>
	</div>
</div>
<div class="container-right" id="id_right">
	<form action="/aa/success.action" method="post" id="id_form">
		<input type="hidden" id="orderId" name="orderId" value="${orderId}"/> 
		<p>
			<button type="submit" οnclick="javascript:submitForm();">确认</button>
		</p>
	</form>
</div>

struts配置：

<package name="offlinerepay" extends="struts-base" namespace="/end/app/offlinerepay">
	<action name="offlineRepay" class="offlineRepayAction" method="offlineRepay">
		<result name="success">/WEB-INF/end/app/offlinerepay/result.jsp</result>
	</action>	
</package>

这样实现Ajax，好处多多，能够实现局部刷新页面。

这种方式是用于：请求页面大部分刷新，返回内容较多的情况。