AJAX请求
请求文件 txt
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{ "Rows":[ { "id":"118", "name":"北欧客厅套餐", "imgPath":"https://img1.baidu.com/it/u=3600272149,3083784625&fm=26&fmt=auto" }, { "id":"118", "name":"新中式风格", "imgPath":"https://img1.baidu.com/it/u=1530783331,3305982952&fm=26&fmt=auto" } ], "Total":2 }
原生请求
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生AJAX请求方法</title>
<style>
* {
padding: 0;margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul { list-style: none; }
li {
position: relative;
display: inline-block;
width: 300px;
margin-right: 10px;
}
div {
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 50%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div img {
position: absolute;top: 0;
width: 100%;height: 100%;
object-fit: cover;
}
p {
position: absolute;
bottom: 0;
z-index: 2;
padding: 5px 0 5px 10px;
font-size: 18px;
color: #fff;
}
</style>
</head>
<body>
<ul id="lst">
</ul>
<script>
var lst = document.getElementById("lst");
// 发送异步请求
// 1、创建 ajax 引擎对象--所有操作都是由 ajax 引擎完成
var xhr = new XMLHttpRequest();
// 2、为引擎对象绑定监听事件
xhr.onreadystatechange = function () {
// 当状态发生变化时处理的事情
if (xhr.readyState == 4 && xhr.status == 200) {
// 5、接收响应消息
var rows = JSON.parse(xhr.responseText).Rows;
var i, html = "";
for (i = 0; i < rows.length; i++) {
html += ' <li class="item"> '
+ ' <div><img src="' + rows[i].imgPath + '" alt="picture"/></div> '
+ ' <p>' + rows[i].name + '</p> '
+ ' </li> ';
}
lst.innerHTML = html;
}
}
// 3、绑定服务器地址
// 参数1:请求方式 GET | POST。
// 参数2:后台服务器地址或请求数据地址。
// 参数3:是否异步,false 为同步,默认异步 true。
xhr.open("get", "txt4", true);
// 4、发送请求
xhr.send();
</script>
</body>
</html>
jQuery 请求
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery AJAX请求</title>
<style>
* {
padding: 0;margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { margin: 20px; font-size: 0}
ul { list-style: none;}
li {
position: relative;
width: 300px;
margin-bottom: 10px;
}
div {
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 50%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div img {
position: absolute;top: 0;
width: 100%;height: 100%;
object-fit: cover;
}
p {
position: absolute;
bottom: 0;
z-index: 2;
padding: 5px 0 5px 10px;
font-size: 18px;
color: #fff;
}
.num {font-size: 20px;color: #000}
.loading {
width: 40px;
height: 0;
margin-left: 130px;
opacity: 0;
}
.loadingShow {
height: 40px;
opacity: 1;
transition: opacity .3s;
}
</style>
<script src="../../../jquery-3.1.0.min.js"></script>
</head>
<body>
<img class="loading" src="data:image/gif;base64,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">
<ul id="lst"> </ul>
<p class="num"></p>
<script>
$.ajax({
type: "get",
url: "txt4",
dataType: 'json',
async: true,
beforeSend: function () {
$(".loading").addClass("loadingShow")
},
success: function (data) {
$(".loading").removeClass("loadingShow")
var rows = data.Rows; // 添加 dataType 为 json 后,将 data 转为对象格式(JSON.parse(data))。
var i, html = "";
for (i = 0; i < rows.length; i++) {
html += ' <li class="item"> '
+ ' <div><img src="' + rows[i].imgPath + '" alt="picture"/></div> '
+ ' <p>' + rows[i].name + '</p> '
+ ' </li> ';
}
lst.innerHTML = html;
$(".num").html(data.Total);
}
})
</script>
</body>
</html>
参考学习:https://www.cnblogs.com/xiaohuochai/p/6036475.html