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

本文实现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,好处多多,能够实现局部刷新页面。

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


评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值