欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jq式ajax 滚动加载数据(含源码) 初级前端工程师进阶必备 这一刻让网页 更顺畅

程序员文章站 2022-06-18 07:51:08
jq式ajax滚动加载数据Ajax优点介绍:AJAX 是一种用于创建快速动态网页的技术,AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。滚动式加载ajax是大多网站的必备,一来给用户带来很好的体验感,二来将数据拆分,多次调用数据渲染画面,让网站运行处于良好环境,并且不会出现卡顿,是创建、快速动态网站的网站开发技术。既是jq式ajax,记得先引...

jq式ajax滚动加载数据

Ajax优点介绍:

AJAX 是一种用于创建快速动态网页的技术,AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。

滚动式加载ajax是大多网站的必备,一来给用户带来很好的体验感,二来将数据拆分,多次调用数据渲染画面,让网站运行处于良好环境,并且不会出现卡顿,是创建、快速动态网站的网站开发技术。

既是jq式ajax,记得先引入jq。

以下是我写的jq式ajax源码,大家可以借鉴学习,也欢迎大家探讨学习,创作出更好的前端代码!

 

  1.           var LockMore = false;
  2.             $(window).scroll(function(event) {
  3.                 var wScrollY = window.scrollY; // 当前滚动条位置
  4.                 var wInnerH = window.innerHeight; // 设备窗口的高度(不会变)
  5.                 var bScrollH = document.body.scrollHeight; // 滚动条总高度
  6.                 if (wScrollY + wInnerH >= bScrollH) {  //开始运行ajax调用数据
  7.                     $.ajax({
  8.                         url: "new_file.json",//API数据接口
  9.                         // ps:当没有api数据口,可以用json文件制作个本地数据库,创造出一个接口
  10.                         type: 'get',//请求方式(大多以get请求或post请求)
  11.                         dataType: 'json',//数据,json字符串
  12.                         
  13.                         //请求成功数据调用
  14.                         success: function(res) {
  15.                             console.log(res)//打印数据、找到数据
  16.                             var li = "";
  17.                             $(res.list).each(function() {
  18.                                 li += "<li>" + this.id + this.title + "</p></li>";
  19.                             })//数据拼接
  20.                             $("ul").append(li)//将数据渲染到页面上
  21.                             
  22.                         },
  23.                         //请求失败,包含具体的错误信息
  24.                         error: function(err) {
  25.                             console.log(err.status);
  26.                             console.log(err.responseText);
  27.                         }
  28.                     })
  29.                 } if (LockMore) {
  30.                     return false;
  31.                 }
  32.             });  

各位程序猿有关于前端问题,可私信本博主!

本文地址:https://blog.csdn.net/Acc13959255444/article/details/107458382