一、图片请求
1.案例描述
利用jq中的ajax去请求接口，获取数据，并对数据进行渲染显示到页面上。
2.案例效果演示
说明：目前我只请求了4条数据。
3.案例局部代码
css代码：
html
<style>
.imgSrc img {
width: 100px;
height: 80px;
object-fit: contain;
}
table {
text-align: center;
}
</style>html代码：
html
<table border="1" cellspacing="0" width="600px">
<tr>
<th>序号</th>
<th>壁纸名称</th>
<th>壁纸图片</th>
</tr>
</table>jq代码：
html
<script>
$(function() {
var list = [];
$.ajax({
url: "https://api.apiopen.top/api/getImages?page=0&size=4",
dataType: "json",
type: "get",
async: '',
data: {},
success: function(res) {
console.log(res);
list = res.result.list;
//也可以直接在这里处理数据
},
error: function(res) {
// console.log(res);
}
});
console.log(list);
// 展示获取过来的数据,先对其遍历循环，放到行标签里，之后将创建好的元素插入到table中
$(list).each(function(i, ele) {
var $tr = $('<tr><td>' + (i + 1) + '</td><td class="name">' + ele.title + '</td><td class="imgSrc"><img src=' + ele.url + ' /></td></tr>');
$('table').append($tr);
// console.log(i);
// console.log(list[i].title);
});
});
</script>4.案例整体代码
html
<!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">
<meta name="referrer" content="no-referrer">
<title>Document</title>
<script src="./js/jQuery.min.js"></script>
<style>
.imgSrc img {
width: 100px;
height: 80px;
object-fit: contain;
}
table {
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" width="600px">
<tr>
<th>序号</th>
<th>壁纸名称</th>
<th>壁纸图片</th>
</tr>
</table>
<script>
$(function() {
var list = [];
$.ajax({
url: "https://api.apiopen.top/api/getImages?page=0&size=4",
dataType: "json",
type: "get",
async: '',
data: {},
success: function(res) {
console.log(res);
list = res.result.list;
},
error: function(res) {
// console.log(res);
}
});
console.log(list);
// 展示获取过来的数据
$(list).each(function(i, ele) {
var $tr = $('<tr><td>' + (i + 1) + '</td><td class="name">' + ele.title + '</td><td class="imgSrc"><img src=' + ele.url + ' /></td></tr>');
$('table').append($tr);
// console.log(i);
// console.log(list[i].title);
});
});
</script>
</body>
</html>二、短视频请求代码
1.案例效果
2.案例完整代码
html
<!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">
<meta name="referrer" content="no-referrer">
<title>Document</title>
<script src="./js/jQuery.min.js"></script>
<style>
video {
width: 100%;
}
table {
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th width="50px">序号</th>
<th width="200px">发布者</th>
<th width="400px">标题</th>
<th width="200px">视频</th>
</tr>
</table>
<script>
$(function() {
var list = [{}];
$.ajax({
url: "https://api.apiopen.top/api/getHaoKanVideo?page=0&size=10",
// dataType: "json",
// type: "get",
async: false, //实现ajax的同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
// data: {},
success: function(res) {
console.log(res);
// console.log(res.result.list);
// list = res.result.list;
},
error: function(res) {
// console.log(res.result.list);
}
});
// console.log(list);
// 展示获取过来的数据
$(list).each(function(i, ele) {
var $num = parseInt(i + 1)
var $tr = $('<tr><td>' + $num + '</td><td class="name">' + ele.userName + '</td><td>' + ele.title + '</td><td><video src=' + ele.playUrl + ' controls></video></td></tr>');
$('table').append($tr);
// console.log(i);
// console.log(list[i].title);
});
});
</script>
</body>
</html>五、其他
代码可以进一步封装一下，先这样吧。
html
<div class="tab_list">
<ul>
<li class="active" onclick="getGoodList(this,0)">全部</li>
{loop $baike $bvv}
<li onclick="getGoodList(this,{$bvv['id']})">{$bvv['catname']}</li>
{/loop}
</ul>
</div>
<div class="tab_con">
<div class="item">
这里面插入的内容
</div>
</div>
</div>
javascript
<script>
//jq初始化加载全部订单
$(function () {
$.ajax({
url: "<?php echo url('fenleinew');?>",//接口地址
data: {id: 0},//全部 默认传0
async: false,
type: 'GET',
dataType: 'json',
error: function (err) {
console.log(err)
},
success: function (res) {
console.log(res);
list = res.data
}
});
console.log(list);
// 展示获取过来的数据,先对其遍历循环，放到标签里，之后将创建好的元素插入到盒子中
$(list).each(function (i, ele) {
// console.log(i,ele);
var $dl = $('<dl><dt><a href="#"><img src="' + ele.image + '" alt="" /></a></dt><dd class="dd2"><a href="#">' + ele.title + '</a></dd>' + '<dd class="dd3"><img src="" /><span class="looks">' + ele.num + '</span></dd><dd class="dd4"><div class="left"><img src="{CLOUD_IMG_PATH}home/header.png" />' + ele.username + '</div><div class="right">' + ele.inputtime + '</div></dd></dl>'
);
console.log(ele.image);
$('.item').append($dl);
});
})
function getGoodList(e, id) {
console.log(id);
$(e).addClass("active")
$(e).siblings().removeClass("active")
//每次切换先清空，否则会叠加
$('.item').empty();
var list = [];
$.ajax({
url: "<?php echo url('fenleinew');?>",
data: {id: id},
async: false,
type: 'GET',
dataType: 'json',
error: function (err) {
console.log(err)
},
success: function (res) {
console.log(res);
list = res.data
}
});
console.log(list);
// 展示获取过来的数据,先对其遍历循环，放到标签里，之后将创建好的元素插入到盒子中
$(list).each(function (i, ele) {
console.log(ele.image);
var $dl = $('<dl><dt><a href="#"><img src="' + ele.image + '" alt="" /></a></dt><dd class="dd2"><a href="#">' + ele.title + '</a></dd>' + '<dd class="dd3"><img src="" /><span class="looks">' + ele.num + '</span></dd><dd class="dd4"><div class="left"><img src="{CLOUD_IMG_PATH}home/header.png" />' + ele.username + '</div><div class="right">' + ele.inputtime + '</div></dd></dl>'
);
console.log($dl);
$('.item').append($dl);
});
}
</script>六、总结
- 接口地址是从网上扒拉过来的，详情见博客：
https://blog.csdn.net/c__chao/article/details/78573737 - 图片在页面不显示，处理方法：在头部加入代码：
html
<meta name="referrer" content="no-referrer">- 视频：https://api.apiopen.top/api/getHaoKanVideo?page=0\&size=10
图片：https://api.apiopen.top/api/getImages?page=0\&size=4
后边的参数可更改，size指的是数据的条数。 - async: false, //实现ajax的同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
- 从聚合找到的接口没法在前台直接使用，一般是后台用的多，需要对接口进行处理。所以有时候前端拿过来直接用，光报错。