通过埃阿斯请求动态填充页面数据的实例

你可能得预先了解

实现功能：点击页面上的按钮实现动态追加数据

实现原理：点击页面按钮，通过埃阿斯提交请求到后台，后台接收请求后进行数据库操作，然后返回数据到前台并进行页面渲染

动态加载更多数据

代码实现

//1.页面布局div style=' padding: 0 0 20px 0 '输入类型=“隐藏”类=“提示”值=“1”输入样式='背景： # 01 AFE；颜色： # FFF；光标：指针；文本对齐：居中；高度：30 px垂直对齐： 中间；padd :0 5 pxtype=' button ' name=' more ' id=' more ' value='加载更多onclick=' moreData()；//div//2.js代码函数moreData(){ var ptip=$(' .提示')。val()；var jstr={第：页ptip }；$.Ajax({ URL : ' $ { RC。getcontextpath()}/publication/more。do '，//url以具体为实现type: 'POST '，dataType: 'html '，data:jstr，timeout: 5000，cache: false，beforeSend: LoadFunction，//加载执行方法error: erryFunction，//错误执行方法success: succFunction //成功执行方法})函数LoadFunction() { $('#more ')." val("加载中.');}函数erryFunction() { alert('获取数据错误，请重试!');$('#more ')." val("加载更多');}函数succFunction(数据){ if(数据！=空数据！=''){ $('.提示')。val(ptip)；$('#more ')." val("加载更多');$('.主内容').追加（数据);}else{ $('#more ')." val("无更多数据');$('#more ').attr('disabled '，true)；} }//3.后台代码//3.1 java代码实现导入Java。乌提尔。列表；导入javax。servlet。http。HttpServletrequest导入组织。弹簧框架。豆子。工厂。注释。自动连线；导入组织。弹簧框架。刻板印象。控制器；导入组织。弹簧框架。ui。模型图；导入组织。弹簧框架。网络。绑定。注释。请求映射；导入组织。弹簧框架。网络。绑定。注释。请求方法；导入com。app moudle。基地。consts导入com。app moudle。模特。ssdj。出版；导入com。app moudle。ServiCe。publicityServiCe@ Controller @请求映射(“/public”)公共类'更多数据{私有字符串ftlURL='./publication/moredata。ftl '；@自动连线私有公共服务公共服务；@RequestMapping(值='更多'，方法=RequestMethod .开机自检)公共字符串getMoreData(httpersvletrequest请求，模型图映射){整数开始=0；字符串页码=请求。GetParameter('页码')；如果（页码！=null){ start=整数。parsent(页码)* 20;}列表发布dataList=publicityservice。查找列表(开始，常量.PAGE_SIZE，null，‘1’，null，null)；map.put('index_number '，start)；map.put('dataList '，dataList)；返回ftlURL}}//3.2模板页面//(MoreData.ftl)#if dataList？#将数据列表列为DataItem tr TD class=' f-blue ' $ { DataItem _ index 1 index _ number }/TD # if DataItem。公司名称？长度12 ${dataItem.comp_name？子字符串(0,12)}.# else $ { DataItem。comp _ name }/# if/TD $ { DataItem。license _ number }/TD # if DataItem。许可证名称？长度10 ${dataItem.license_name？子字符串(0,10)}.# else $ { DataItem。license _ name }/# if/TD # if DataItem。validaty _ start？has _ content $ { DataItem。validaty _ start？日期}/# if/TD TD # if DataItem。validaty _ end？has _ content $ { DataItem。validaty _ end？日期}/# if/TD TD # if DataItem。许可证内容？长度20 ${dataItem.license_content？子字符串(0,20)}.# else $ { DataItem。license _ content }/# if/TD/tr/# list/# if效果截图

后台返回数据（带格式)

片尾留注

1、前台页面点击增加更多后，向后台发起请求，后台进行数据库操作，返回数据后填充到数据模板，带格式的数据返回到前台填充页面

2、代码中的变量ptip指代当前获取次数，也可理解为获取页数，后台设定每次获取普通条数据，初次获取是以页面已有数据数开始，追加普通条数据，以此循环

3.该代码段用于项目开发。因为项目使用的是框架，后台代码编写格式仅供参考

上面通过Ajax请求动态填充页面数据的例子是边肖共享的所有内容。希望能给大家一个参考，支持我们。