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

程序员文章站 2022-03-07 13:43:12

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

jq式ajax滚动加载数据

Ajax优点介绍：

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

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

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

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

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

var LockMore = false;
$(window).scroll(function(event) {
var wScrollY = window.scrollY; // 当前滚动条位置
var wInnerH = window.innerHeight; // 设备窗口的高度（不会变）
var bScrollH = document.body.scrollHeight; // 滚动条总高度
if (wScrollY + wInnerH >= bScrollH) { //开始运行ajax调用数据
$.ajax({
url: "new_file.json",//API数据接口
// ps:当没有api数据口，可以用json文件制作个本地数据库，创造出一个接口
type: 'get',//请求方式（大多以get请求或post请求）
dataType: 'json',//数据，json字符串
//请求成功数据调用
success: function(res) {
console.log(res)//打印数据、找到数据
var li = "";
$(res.list).each(function() {
li += "<li>" + this.id + this.title + "</p></li>";
})//数据拼接
$("ul").append(li)//将数据渲染到页面上
},
//请求失败，包含具体的错误信息
error: function(err) {
console.log(err.status);
console.log(err.responseText);
}
})
} if (LockMore) {
return false;
}
});

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

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

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

jq式ajax滚动加载数据