ajax动态加载页面(分页)

本文介绍如何使用AJAX请求控制层返回的页面并将其动态附着到指定标签中,实现项目列表的条件筛选与分页展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ajax请求控制层返回的页面append到相应的标签中


@RequestMapping("/ajaxFindProjectByCodition")
public String ajaxFindProjectByCodition(@RequestParam(value="projectIndustry",defaultValue="-1") Integer projectIndustry,
@RequestParam(value="projectStatus",defaultValue="-1") Integer projectStatus,@RequestParam(value="orderType",defaultValue="-1") Integer orderType,
@RequestParam(value="currentPage",defaultValue= "1") Integer currentPage,Model model,HttpServletRequest request) throws UnsupportedEncodingException{
//关键字
String key=request.getParameter("key");
if(!StringUtil.isEmpty(key)){
key=URLDecoder.decode(key,"utf-8");
}

List<RaiseProject> raiseProjectList = projectService.findProjectListByCondition(RAISETYPE_AWARD,projectIndustry,projectStatus,orderType,currentPage,PAGE_SIZE,key);
model.addAttribute("raiseProjectList", raiseProjectList); 
return  "/client/ajaxIndustryList"; //返回一个页面

}


ajaxIndustryList.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
  <c:forEach items="${raiseProjectList }" var="raiseProject" varStatus="stat">
        <div id="showDel${stat.count }" class="item clearfix bottom go" data-id="a6a97c2f7d25963bd680ebb9" data-url="/deal/id-137125">
                <a href="../clientUser/cancelCareProject?projectId=${raiseProject.id }" class="delete" ></a>
                <a href="../client/gotoProjectDetail?projectId=${raiseProject.id }" class="a-click"></a>
               <div class="item-image uc">
               <a><img src="${raiseProject.coverImgUrl }"></a>
               <p class="bar"><span style="width:<fmt:formatNumber value='${raiseProject.isFinishPercent }' type='percent' maxIntegerDigits='8'/>;">
               </span></p>
               <em>已完成<fmt:formatNumber value="${raiseProject.isFinishPercent }" type="percent" maxIntegerDigits="8"/></em>
               </div>
               <div class="item-content uc">
               <h3><a>${raiseProject.name }</a></h3>
               <p class="p-color">${raiseProject.projectIntro }</p>
               <div class="clearfix bottom"><div class="price"><em class="number">${raiseProject.minMoney }</em><span><em>元</em>起</span></div>
               <span class="support">已支持<em>${raiseProject.supporterNum }</em>人</span>
               </div>
               </div>
            </div>
        </c:forEach>

js


var currentPage = 1;

function getData() {// 分类,状态,排序

currentPage++;
var projectIndustry = $("#projectIndustry").val();
var projectStatus = $("#projectStatus").val();
var orderType = $("#orderType").val();
var key = $("#key").val();
$.ajax({
type : 'post',
url : '../client/ajaxFindProjectByCodition',
data : {
'projectIndustry' : projectIndustry,
'projectStatus' : projectStatus,
'orderType' : orderType,
"currentPage" : currentPage,
key : key
},
success : function(result) {
if (result == "" || result == null || result.length < 15) {
// $("#addMore").hide();
$("#addMore").html("已经是最后一页");
}
$('#selectDataId').append(result);//增加返回的页面
}
});

}


<section class="bg-white border-tb items" id="selectDataId">
<c:forEach items="${raiseProjectList}" var="raiseProject"..........

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贾宝玉的贾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值