来,案例之前,容我分享一下js如何发送请求。
原生js发送请求:
let xhr= new XMLHttpRequest();
// methods:GET/POST请求方式等,url:请求地址,true异步(可为false同步)
xhr.open("methods","url" ,true);
xhr.send(); // 发送
xhr.onreadystatechange = function() { // 判断
if (xhr.readyState == 4 && ajax.status == 200) { // 成功,接收到数据
console.log(xhr.response); // 查看返回的数据(可输出 xhr 哈)
//JSON.parse(xhr.response); // 如果数据为字符串的对象,可转换一下
}else if(xhr.status == 404) { // 失败,页面未找到
}
}
}
ajax发送请求:
// https://www.bootcdn.cn/ (上面有jquery等开源库,自己引入jquery)
$.ajax({
type:"", //请求方式
url:"", //路径
async:true, //是否异步
dataType:"json", //返回数据的格式
success:function(res){ //成功的回调函数
console.log(res); //res代表返回的数据,可以随心所欲处理数据啦
}
})
话不多说,上代码 ==>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: #404040;
}
header{
width: 1000px;
height: 40px;
line-height: 40px;
margin: 20px auto;
font-size: 28px;
font-weight: 600;
text-align: center;
}
.box{
width: 1000px;
margin: 10px auto 0px;
}
.box::after{
content: "";
display: block;
clear: both;
}
.boxli{
width: 25%;
float: left;
padding: 20px;
box-sizing: border-box;
border: 1px solid #eee;
}
.tupian{
display: block;
width: 100%;
}
.title{
width: 100%;
line-height: 30px;
font-size: 26px;
font-weight: 600;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.passtime{
width: 100%;
height: 24px;
line-height: 24px;
margin: 10px 0;
text-align: right;
font-size: 18px;
}
.tuImg{
width: 100%;
height: 20vh;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<header> js采用ajax发送请求获取新闻 </header>
<ul class="box">
<!-- <li class="boxli">
<a class="tupian" href="">
<p class="title"></p>
<div class="passtime"></div>
<img src="" alt="" class="tuImg">
</a>
</li> -->
</ul>
<script>
let box = document.querySelector('.box');
$.ajax({
type: 'post',
url: "https://api.apiopen.top/getWangYiNews",
async: true,
dataType: "json",
success: function(res) {
console.log(res);
let data = res.result;
let html = '';
for (let i = 0; i < data.length; i++) {
html += "<li class='boxli'>";
html += '<a class="tupian" href="'+ data[i].path +'">'
html += '<p class="title">'+ data[i].title +'</p>';
html += '<div class="passtime">'+ data[i].passtime +'</div>'
html += '<img src="'+ data[i].image +'" alt="'+ data[i].title +'" class="tuImg">'
html+= '</a>'
html += "</li>"
}
box.innerHTML = html;
}
})
</script>
</body>
</html>
讲解:
- 采用ajax的方式发送请求;
- 通过定义html变量,拼接标签,最后放入ul标签中
- 此处可以采用拼接
- 当然,还有es6的模板引擎 `` 里面直接放标签即可,无需拼接,数据 ${数据}
模板引擎用法(将拼接处代码换成以下代码):
html += `<li class="boxli">
<a class="tupian" href="${data[i].path}">
<p class="title">${data[i].title}</p>
<div class="passtime">${data[i].passtime}</div>
<img src="${data[i].image}" alt="图片无法显示,请检查网络是否正常" class="tuImg">
</a>
</li>`
在VsCode中,Tab键是往后缩进,Shift+Tab是往前缩进。
该项目接口采用网站为开源社区的API接口文档地址
有人恶意刷接口,导致接口调用频繁,接口已经不能稳定运行,所以计划近期下线,积德吧朋友,如果长期如此,所有接口将面临关闭。
所以,不要滥用哈!
更多es6新特性,可以查看我的笔记
或者,阮一峰的es6(真正的大牛)