今天小编就为大家分享一篇通过Ajax请求动态填充页面数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

你可能得预先了解

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

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

动态加载更多数据

代码实现

//1.页面布局
<div>
 <input type="hidden" 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??>
 <#list dataList as dataItem>
  <tr>
   <td class='f-blue'>${dataItem_index+1+index_number}</td>
   <td>
    <#if dataItem.comp_name?length > 12>
     ${dataItem.comp_name?substring(0,12)}..
    <#else>
     ${dataItem.comp_name}
    </#if>
   </td>
   <td>${dataItem.license_number}</td>
   <td>
    <#if dataItem.license_name?length > 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 > 20>
     ${dataItem.license_content?substring(0,20)}..
    <#else>
     ${dataItem.license_content}
    </#if>
    </td>
  </tr>
 </#list>
</#if>

效果截图

后台返回数据(带格式)

片尾留注

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

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

3、本代码段为项目开发中使用,因项目使用框架,后台代码书写格式仅作为参考使用

以上这篇通过Ajax请求动态填充页面数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
格力集团为转让格力电器股份采购券商及法律服务

格力集团为转让格力电

珠海格力集团有限公司分别采购“格力电器国有股份转让
亚马逊中国业务调整 外商难以与本地企业竞争

亚马逊中国业务调整

据The Verge报道,亚马逊周四宣布,该公司正在关闭其中国
从“电商”打到“云” 亚马逊、阿里谁更胜一筹?

从“电商”打到“云”

阿里巴巴和亚马逊,两家公司分别作为中、美两国的电商巨
爱奇艺称VIP会员权限被闪电盒子破(kai)解(she) 起诉索赔五百万

爱奇艺称VIP会员权限

因认为“闪电盒子”安卓APP在播放其影视视频节目时,会
为什么有人给自己的朋友圈点赞?

为什么有人给自己的朋

给自己点赞,是希望自己能好起来。
因拖延退费、合同扣费条款等争议 尚德机构被约谈

因拖延退费、合同扣费

京市市场监督管理局发布消息称,针对近日媒体报道的北京
最新文章
使用Ajax模仿百度搜索框的自动提示功能实例

使用Ajax模仿百度搜索

今天小编就为大家分享一篇使用Ajax模仿百度搜索框的自
解决ajax异步请求返回的是字符串问题

解决ajax异步请求返回

这篇文章主要介绍了解决ajax异步请求返回的是字符串问
Ajax引擎 ajax请求步骤详细代码

Ajax引擎 ajax请求步

这篇文章主要为大家详细介绍了Ajax引擎 ajax请求步骤
Ajax实现表格中信息不刷新页面进行更新数据

Ajax实现表格中信息不

这篇文章主要为大家详细介绍了Ajax实现表格中的信息不
ajax实现页面的局部加载

ajax实现页面的局部加

这篇文章主要为大家详细介绍了ajax实现页面的局部加载
爬取今日头条Ajax请求

爬取今日头条Ajax请求

今天小编就为大家分享一篇关于爬取今日头条Ajax请求的