Hongmu Notes
Home Program Notes pbootcms ajax no refresh loading next page technology
Program Notes PbootCms

pbootcms ajax no refresh loading next page technology

pbootcms ajax no refresh loading next page technology

js code:

//先定义一些基本的内容

//Page就是第几页,由当前页{page:current} + 1,就是第二页,parseInt确保该数值是Int类型。
var Page = parseInt('{page:current}') + 1;

//Num就是每页几条信息,因为列表默认显示的是2条,所以这里设为2,结合上面的第二页实际上就是从第三条信息开始读取。
var Num  = 6;

//定义内容的Dom位置,也就是读取出来的内容要添加到哪个div里面去。
var Dom  = jQuery('#listbox');

jQuery(window).scroll(function(){

//当前窗口和页面顶部的距离
var WindowTop = jQuery(window).scrollTop();

//可视窗口区域高度
var WindowHeight = jQuery(window).outerHeight();

//页面的高度
var DocHeight = jQuery(document).height();

//定义一个开关
var load = true;

//定义当前栏目id
var Scodeid = {sort:scode};

//判断:(窗口与页面顶部距离 + 窗口高度) >= 页面的高度(也就是滚动到页面底部的时候),并且开关是开启状态,执行ajax加载内容
  if( ( WindowTop + WindowHeight ) >= DocHeight && load == true ){

  //先构建Api的地址,具体的Api地址参数,请参考官方手册。
  var url = '/api.php/list/' + Scodeid + '/page/' + Page + '/num/' + Num;
  
  //开始Ajax提交请求,请求路径就是Api接口
  jQuery.ajax({
      //请求类型
      type: 'POST', 
      //请求地址
      url: url,
      //返回数据类型
      dataType: 'json',
      //请求参数,参考官方Api手册
      data: {
          appid: '{pboot:appid}',
          timestamp: '{pboot:timestamp}',
          signature: '{pboot:signature}',
      },
      //请求成功
      success: function( response, status ){
          //定义Data变量为返回的数据
          var Data = response.data;
          if( response.code ){
              //获取数据成功,进行循环,value就是文章对象
              jQuery.each( Data, function( index, value ){
                  //将内容append到列表
                  var Html = '<div class="col-12 col-sm-6 col-md-4 p-3"> <a href="' + value.link + '"><img src="' + value.ico + '" alt=""></a><a href="[list:link]"><h3>' + value.title + '</h3></a></div>';
                  Dom.append( Html );
              });
              //分页+1,下次获取下一页的内容
              Page += 1;
              //设置开关状态为开启,进行下次加载
            load == true;
          }
      },
      //请求失败
      error: function( xhr, status, error ){
          //返回数据异常
          console.log( error );
      }
  })
}})
微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

Addition of message function to pbootcms website

Addition of message function to pbootcms website Program Notes PbootCms

Scope of application of message board tags: can be used anywhere on the entire site Tag function: used for users to submit messages and retrieve message records 1. Message submission form<form action="{pboot:msgaction}" method="post"> Contact person:<input type="tex…
👁 174
pbootcms introduces public file code

pbootcms introduces public file code Program Notes PbootCms

1. Template file nested reference {include file=***.html} Instructions for use: It can be used nested, such as: index.html nests a head.html, and nested comm.html in head.html supports the use of subdirectories, such as: {include file=comm/*.html} 2. Time formatting tag style=*, such as: within...
👁 235

Recommended reading

Water purification equipment water treatment enterprise website template 0744

Water purification equipment water treatment enterprise website template 0744 Practical Collection Yiyou template

A eyoucms website template for water purification equipment and water treatment enterprises. Design style of science and technology environmental protection, can display water purification products, water treatment system, technical solutions and engineering cases. Help water treatment companies display their brands online and attract home and industrial customers. Template display, installation instructions website background: / login.php account: admin password: admin related article easy you CMS installation FAQ summary easy you...
👁 61
Environmental-friendly plastic and paper cup website templates – 0745

Environmental-friendly plastic and paper cup website templates – 0745 Practical Collection Yiyou template

This EyouCMS template is ideal for businesses specializing in eco-friendly plastic or paper water bottles and cup products. Its eco-conscious and practical design effectively showcases your water bottle collections, paper cup series, sustainable materials, and brand identity. It helps environmental goods companies showcase their products online and attract both wholesale and retail customers. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS...
👁 67
Responsive New Energy and Chemical Industry Research Institute Website Template 0746

Responsive New Energy and Chemical Industry Research Institute Website Template 0746 Practical Collection Yiyou template

An eyoucms responsive website template for the New Energy and Chemical Industry Research Institute. The design style is technological and environmentally friendly, and can showcase new energy projects, chemical research, technical achievements and institutional strength. It helps scientific research institutes establish an authoritative image online and attract cooperative customers. Template display Installation instructions Website backend: /login.php Account: admin Password: admin Related articles Yiyou CMS installation FAQ summary Yiyou...
👁 36
Resource website typecho001 template

Resource website typecho001 template Program Notes Typecho

typecho001 template template please do not modify the folder name of this template. The folder name is: typecho001 1.4 Fix the js output problem on the article page 1.3 Fix the error prompt when the plug-in is not installed Optimize the list page code output 1.2 Fix the comment function and add a custom homepage title 1.1 Fix the comment reply asymmetry function Add a separate title setting function on the homepage Add the website favicon.ico icon Add one...
👁 198
Responsive New Energy & Clean Energy Company Website Template 0747

Responsive New Energy & Clean Energy Company Website Template 0747 Practical Collection Yiyou template

This EyouCMS responsive template is ideal for new energy and clean energy companies. Its modern, eco-friendly design effectively showcases new energy projects, clean energy products, technological R&D capabilities, and corporate strength. It helps new energy enterprises present their brands online and attract investment and partnerships. Template Overview | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS...
👁 45
Modification of typecho paging style

Modification of typecho paging style Program Notes Typecho

Sir, times have changed! Typecho is currently the most perfect solution, because Baidu can only see the code of fixed thinking. The actual generated HTML code is breathtakingly clean and fully customized, including adding classes to the li element, adding classes to the a element, adding classes to the previous page and next page, and removing the li tags that come with typecho to express more. I can even add some text to the content inside...
👁 517