你可能得预先了解
实现功能:点击页面上的按钮实现动态追加数据
实现原理:点击页面按钮,通过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="加载更多" , dataList);
return ftlURL;
}
}
//3.2 模板页面
//(MoreData.ftl)
#if dataList??>
#list dataList as dataItem>
tr>
td class='f-blue'>${dataItem_index+1+index_number}/td>
td>
#if dataItem.comp_name?length gt; 12>
${dataItem.comp_name?substring(0,12)}..
#else>
${dataItem.comp_name}
/#if>
/td>
td>${dataItem.license_number}/td>
td>
#if dataItem.license_name?length gt; 10>
${dataItem.license_name?substring(0,10)}..
#else>
${dataItem.license_name}
/#if>
/td>
td>
#if dataItem.validaty_start?has_content>
${dataItem.validaty_start?date}
/#if>
/td>
td>
#if dataItem.validaty_end?has_content>
${dataItem.validaty_end?date}
/#if>
/td>
td>
#if dataItem.license_content?length gt; 20>
${dataItem.license_content?substring(0,20)}..
#else>
${dataItem.license_content}
/#if>
/td>
/tr>
/#list>
/#if>
效果截图

后台返回数据(带格式)
片尾留注
1、前台页面点击增加更多后,向后台发起请求,后台进行数据库操作,返回数据后填充到数据模板,带格式的数据返回到前台填充页面
2、代码中的变量 ptip 指代当前获取次数,也可理解为获取页数,后台设定每次获取N条数据,初次获取是以页面已有数据数开始,追加N条数据,以此循环
3、本代码段为项目开发中使用,因项目使用框架,后台代码书写格式仅作为参考使用
以上这篇通过Ajax请求动态填充页面数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:- Ajax引擎 ajax请求步骤详细代码
- vue项目使用axios发送请求让ajax请求头部携带cookie的方法
- 为jquery的ajax请求添加超时timeout时间的操作方法
- ajax请求后台得到json数据后动态生成树形下拉框的方法
- 通过jquery的ajax请求本地的json文件方法
- jQuery中ajax请求后台返回json数据并渲染HTML的方法
- ajax请求后台接口数据与返回值处理js的实例讲解
- jquery 通过ajax请求获取后台数据显示在表格上的方法
- Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
- 关于Ajax异步请求后台数据进行动态分页功能
- 爬取今日头条Ajax请求