ajax异步加载

最新推荐文章于 2022-03-25 18:52:39 发布

贫僧洗发水呢

最新推荐文章于 2022-03-25 18:52:39 发布

阅读量474

点赞数

分类专栏： demo 前端

本文链接：https://blog.csdn.net/qq_43196360/article/details/94965799

版权

demo 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

ajax异步加载

实现目标：点击“加载更多”按钮，就不刷新页面地加载更多数据在页面上。

思路：将数据列表另起一个页面，并且在原页面“加载更多”按钮的点击事件中写一个ajax请求，该请求从后台获取数据并返回给数据页面。最后在ajax的回调函数中，将渲染的数据列表页面使用jquery或其他方式追加在原页面上。

原页面及JS(为减少篇幅只写相关部分)：

<div>
    <div id="datalist">
		<!-- 数据将追加在该区域 -->
	</div>
		<!-- 加载按钮 -->
	<button id="morebtn" onclick="load()">
				<img style="height: 30px" src="./img/jiazaigengduo.png" id="moreimg" ></img>
	</button>
</div>

//加载按钮点击事件(ajax请求)：
function load(){
	i++;   //记录当前获取的是第几页的数据
	$.ajax({     //ajax请求
		url:'getmore.do?page='+i+'&select='+select,  //页值作为参数发送给后台
		success:function(data){          //ajax回调函数，解析返回的数据列表页面                       
	        var body=getBody(data);     //自定义函数得到body
	        body=iGetInnerText(body);   //自定义函数去回车空格换行
			$("#datalist").append(body);  //追加在原页面上
		}
	})
}

//取出body
	function getBody(content){
  		var REG_BODY = /<body[^>]*>([\s\S]*)<\/body>/;
        var result = REG_BODY.exec(content);
        if(result && result.length === 2)
            return result[1];
        return content;
    }
//去回车换行空格
	function iGetInnerText(testStr) {
        var resultStr = testStr.replace(/\ +/g, ""); //去掉空格
        resultStr = testStr.replace(/[ ]/g, "");    //去掉空格
        resultStr = testStr.replace(/[\r\n]/g, ""); //去掉回车换行
        return resultStr;
    }

数据列表页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据列表</title>
<script type="text/javascript"
	src="./js/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<c:if test="${sessionScope.data[iistatus.index*5]!=null}" >
	<c:forEach var="ii" begin="0" end="9" varStatus="iistatus">
		<c:choose>
			<c:when test="${sessionScope.data[iistatus.index*5]!=null}">
				<div class="danpin center">
					<div class="biaoti center"  style="height: 10px"></div>
					<div class="main center">
						<c:forEach varStatus="istatus" var="i"
							begin="${iistatus.index*5 }" end="${iistatus.index*5+4 }"
							items="${ sessionScope.data }">
							<div class="mingxing fl" style="padding-bottom: 10px">
								<div class="sub_mingxing">
									<a href="articledetail.do?id=${i.id }"><img src="${i.img }"
										alt=""></a>
								</div>
								<div class="pinpai">
									<a href="articledetail.do?id=${i.id }">${i.name }</a>
								</div>
								&nbsp;
								<div class="jiage">${i.price }元</div>
								<div class="youhui">销量:${i.hot }&nbsp;&nbsp;库存:${i.num }</div>
								<div class="jrgwc"
									style="display: flex; flex-direction: row-reverse;">
									<a href="javascript:jrgwc(${i.id });"> <img
										style="width: 20px; height: 20px; margin-right: 20px;"
										src="./img/gouwuche.jpg">
									</a>
								</div>
							</div>
						</c:forEach>
						<div class="clear"></div>
					</div>
				</div>
			</c:when>
		</c:choose>
	</c:forEach>
</c:if>
</body>
</html>

贫僧洗发水呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax异步加载

ajax异步加载实现目标：点击“加载更多”按钮，就不刷新页面地加载更多数据在页面上。思路：将数据列表另起一个页面，并且在原页面“加载更多”按钮的点击事件中写一个ajax请求，该请求从后台获取数据并返回给数据页面。最后在ajax的回调函数中，将渲染的数据列表页面使用jquery或其他方式追加在原页面上。原页面及JS(为减少篇幅只写相关部分)：<div> <div ...
复制链接

扫一扫