jquery发送ajax练习
工具
HBuilder X
代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过ajax进行图片的提取和显示</title>
<style>
div{
background-color: beige;
color: red;
font-size: 30px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$.ajax({
url:'https://image.baidu.com/search/acjson?tn=resultjson\
_com&logid=7217367652009448130&ipn=rj&ct=201326592&is=&f\
p=result&fr=ala&word=%E5%9B%BE%E7%89%87&queryWord=%E5%9B\
%BE%E7%89%87&cl=2&lm=-1&ie=utf-8&oe=utf-8&adpicid=&st=&z\
=&ic=&hd=&latest=©right=&s=&se=&tab=&width=&height=&\
face=&istype=&qc=&nc=&expermode=&nojc=&isAsync=&pn=210&r\
n=30&gsm=d2&1685454799580=',
type:'GET',
// dataType:'json',
success:function(response){
// console.log(response.data);
// console.log(response.data.length);
var data = response.data;
var length = response.data.length - 1;
console.log(data);
// var div = $('div');
// console.log(div);
var insert = $('#insert'); // 为了页面有分隔，用 p 标签
console.log(insert);
for (var i=0;i<length;i++) {
console.log(data[i].thumbURL);
var thumbURL = data[i].thumbURL;
// div.append('<img src="' + thumbURL + '" alt="">');
insert.append('<img src="' + thumbURL + '" height="200">'); // append是加载现有标签的下一级
}
},
error:function(){
console.log('请求失败');
},
async:true
})
})
</script>
</head>
<body>
<div>显示提取的图片：</div>
<p id="insert"></p>
</body>
</html>运行结果
