jquery发送ajax练习
- 工具
- 代码
- 运行结果
工具
HBuilder X
代码
<!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>
运行结果
