jquery发送ajax练习

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=&copyright=&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>

运行结果

相关推荐
Jacob02343 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder8 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder8 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep16 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛21 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i30 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟34 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览38 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少40 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z1 小时前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端