主页 > 知识库 > 通过Ajax请求动态填充页面数据的实例

通过Ajax请求动态填充页面数据的实例

热门标签:Mysql连接数设置 团购网站 阿里云 Linux服务器 银行业务 服务器配置 科大讯飞语音识别系统 电子围栏

你可能得预先了解

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

实现原理:点击页面按钮,通过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;
  }
  ListPublicity> 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 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请求

标签:广元 枣庄 江苏 蚌埠 衢州 大理 萍乡 衡水

巨人网络通讯声明:本文标题《通过Ajax请求动态填充页面数据的实例》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266