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