使用Ajax-Include-Pattern构建动态Web体验
warning:
这篇文章距离上次修改已过454天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Include Pattern Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax-include").each(function(i){
var filePath = $(this).attr("filePath");
$.get(filePath, function(data){
$(this).replaceWith(data);
}.bind(this));
});
});
</script>
</head>
<body>
<div class="ajax-include" filePath="content1.html"></div>
<div class="ajax-include" filePath="content2.html"></div>
<!-- 更多内容 -->
</body>
</html>这个示例代码使用jQuery库来简化Ajax请求过程。.ajax-include类被赋予了一个filePath属性，该属性包含了需要通过Ajax加载的文件路径。页面加载完成后，jQuery遍历所有.ajax-include元素，并发起对应的Ajax GET请求，请求成功返回后，原来的<div class="ajax-include"...>会被返回的内容替换。这样可以实现内容的动态加载，提升用户体验。
评论已关闭