• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    通过Ajax请求动态填充页面数据的实例

    你可能得预先了解

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

    实现原理:点击页面按钮,通过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动态查询数据库数据并显示在前台的方法
    下一篇:ajax异步读取后台传递回的下拉选项的值方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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