在网站中，有一些东西不是所有用户都会看的，不需要一开始就加载。而且当用户需要的时候，也不需要全局刷新页面，实现这样的异步加载，就需要Ajax技术。
前期准备：
在使用Ajax之前，我们需要有服务器，我们可以在本地模拟一个服务器。
- 在Node.js官网下载node。
- 双击安装node，几乎都是下一步。
- 在cmd中输入,安装http-server。
npm install http-server --global
- 在cmd中定位到网站文件夹路径，输入
http-server
- 之后会出现http，直接在浏览器输入就能访问到网页。
load方法：
我们实现一个用户点击按钮查看详情的实例。通过load()方法，实现异步加载。
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/master.css">
<script src="./js/jQuery3.3.1.js" type="text/javascript"></script>
<script src="./js/main.js" type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<button id="trigger">服务协议</button>
<div style="display: none"id="card">
</div>
</body>
</html>
js部分
$(document).ready(function(){
var trigger = $('#trigger');
var card = $('#card');
var show;
trigger.on('click',function(){
if(card.is(':visible')){
card.slideUp();
}else{
if(!show){
card.load('card.html');
show = true;
}
card.slideDown();
}
})
})
在修改代码后，chrom浏览器可能会加载之前的缓存，显示不出新的网页，这时可以使用shift+F5不使用页面缓存进行刷新。
网友评论