无为清净楼资源网 Design By www.qnjia.com
你可能得预先了解
实现功能:点击页面上的按钮实现动态追加数据
实现原理:点击页面按钮,通过Ajax提交请求到后台,后台接收请求后进行数据库操作,然后返回数据到前台并进行页面渲染
动态加载更多数据
代码实现
//1.页面布局 <div style="padding: 0 0 20px 0;"> <input type="hidden" class="tip" value="1"> <input style="background:#01affe;color: #FFF;cursor: pointer; text-align:center;height:30px;vertical-align: middle;padding:0 5px; type="button" name="more" id="more" value="加载更多" onclick="moreData();"/> </div> //2.js代码 function moreData(){ var ptip = $('.tip').val(); var jstr = {pageNo:ptip}; $.ajax({ url: '${rc.getContextPath()}/publicity/more.do',//url以具体为实现 type: 'POST', dataType: 'html', data:jstr, timeout: 5000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#more").val('加载中...'); } function erryFunction() { alert("获取数据错误,请重试!"); $("#more").val('加载更多'); } function succFunction(data) { if(data!=null && data!=""){ $('.tip').val(++ptip); $("#more").val('加载更多'); $('.mainContent').append(data); }else{ $("#more").val('无更多数据'); $("#more").attr('disabled',true); } } //3.后台代码 //3.1 java代码实现 import java.util.List; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import com.appmoudle.base.Consts; import com.appmoudle.model.ssdj.Publicity; import com.appmoudle.service.PublicityService; @Controller @RequestMapping("/publicity") public class MoreData { private String ftlURL = ".../publicity/MoreData.ftl"; @Autowired private PublicityService publicityService; @RequestMapping(value="more",method=RequestMethod.POST) public String getMoreData(HttpServletRequest request,ModelMap map){ Integer start = 0; String pageNo = request.getParameter("pageNo"); if(pageNo!=null){ start = Integer.parseInt(pageNo) * 20; } List<Publicity> dataList = publicityService.findList(start, Consts.PAGE_SIZE, null, "1", null, null); map.put("index_number", start); map.put("dataList", dataList); return ftlURL; } } //3.2 模板页面 //(MoreData.ftl) <#if dataList"" src="/UploadFiles/2021-04-02/20180821154144.jpg">后台返回数据(带格式)
片尾留注
1、前台页面点击增加更多后,向后台发起请求,后台进行数据库操作,返回数据后填充到数据模板,带格式的数据返回到前台填充页面
2、代码中的变量 ptip 指代当前获取次数,也可理解为获取页数,后台设定每次获取N条数据,初次获取是以页面已有数据数开始,追加N条数据,以此循环
3、本代码段为项目开发中使用,因项目使用框架,后台代码书写格式仅作为参考使用
以上这篇通过Ajax请求动态填充页面数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
Ajax请求,填充数据
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]
- 《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/分轨][1GB]
- 黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司空精魄收集攻略
- 《真三国无双:起源》新情报将于9月26日公开,实机演示亮相!
- 黑神话悟空上品鼠禁卫精魄获取方法一览|上品鼠禁卫精魄收集攻略
- 优美的旋律至真的情怀《品茶轻音乐·极品典藏Vol.1CD1》[WAV+CUE]
- 曾嵘《峥嵘岁月DSD(试音碟)》WAV+CUE
- 小提琴天碟AlfredoCampoli坎波利-贝多芬D大调小提琴协奏曲与普罗米修斯作品选FLAC
- 博主称本周游戏业内动荡无比:高价PS5 Pro、Xbox裁员等
- 米哈游也搞AI?米哈游AI大模型Glossa完成备案
- G胖变G瘦后:玩家担心其健康状况:如果他出事 游戏业将发生巨变
- 群星.1995-SUMMER.PASSION.REMIX【宝丽金】【WAV+CUE】
- 王栎鑫.2008-天生一对(EP)【种子音乐】【WAV+CUE】