接口的基本使用
代码(html,css,js)
<!DOCTYPE html>
<html lang="en">
<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>
*{
padding: 0;
margin: 0;
}
table, td, th {
border: 1px solid black;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>标题</th>
<th>图片</th>
<th>日期</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
var data1={
"reason":"success",
"result":{
"stat":"1",
"data":[
{
"uniquekey":"256a9d8497359563b52496b18bb37783",
"title":"娄星区与涟源市开展同心美丽乡村观摩交流活动",
"date":"2021-11-25 18:36:00",
"category":"国内",
"author_name":"人民资讯",
"url":"https://mini.eastday.com/mobile/211125183639873914340.html",
"thumbnail_pic_s":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183639_badc269909dfbefdd8b3ed648352b9a7_1_mwpm_03201609.jpeg",
"is_content":"1"
},
{
"uniquekey":"c63640e81d8bda9898bb02c564d7883a",
"title":"创建全国文明城市 文旅人在行动 | 平凉市图书馆开展服务礼仪专题培训",
"date":"2021-11-25 18:36:00",
"category":"国内",
"author_name":"人民资讯",
"url":"https://mini.eastday.com/mobile/211125183639692548540.html",
"thumbnail_pic_s":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183639_f83b3804c1a1274e0b998afef5d34f11_1_mwpm_03201609.jpeg",
"is_content":"1"
}
],
"page":"5",
"pageSize":"10"
},
"error_code":0
}
var data2={
"reason":"success",
"result":{
"stat":"1",
"data":[
{
"uniquekey":"7e084d69008e150f4579ab40d9da6c43",
"title":"我为群众办实事|西湖街道:联手送法进企业",
"date":"2021-11-25 18:36:00",
"category":"国内",
"author_name":"人民资讯",
"url":"https://mini.eastday.com/mobile/211125183638837305105.html",
"thumbnail_pic_s":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183638_76169b2a03ebd48bd7a0e29613edf433_1_mwpm_03201609.jpeg",
"thumbnail_pic_s02":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183638_76169b2a03ebd48bd7a0e29613edf433_2_mwpm_03201609.jpeg",
"is_content":"1"
},
{
"uniquekey":"8d48293bce94f60d951126d8bc1674fe",
"title":"杭州又一老小区圆了“燃气梦”",
"date":"2021-11-25 18:36:00",
"category":"国内",
"author_name":"人民资讯",
"url":"https://mini.eastday.com/mobile/211125183638760184094.html",
"thumbnail_pic_s":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183638_5ffca521f9abe8a693f502e460223b11_1_mwpm_03201609.jpeg",
"thumbnail_pic_s02":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183638_5ffca521f9abe8a693f502e460223b11_2_mwpm_03201609.jpeg",
"is_content":"1"
}
],
"page":"5",
"pageSize":"10"
},
"error_code":0
}
function showData(data){
var htmlStr=`
<tr>
<td>${data.result.data[0].title}</td>
<td><img src="${data.result.data[0].thumbnail_pic_s}" alt=""></td>
<td>${data.result.data[0].date}</td>
</tr>
`;
console.log(htmlStr);
var $tr=$(htmlStr);
$("tbody").append($tr);
}
showData(data1);
showData(data2);
</script>
</body>
</html>
显示效果
![显示效果](https://i-blog.csdnimg.cn/blog_migrate/885139a2e2f31c2cd1afc727e8cdeb14.png)
总结
- js对象与jquery对象的相互转化
- es6新语法模板字符串插值用法
`${变量}`
- json数据的处理