Ajax 请求JSON数据根据搜索动态变化内容

最新推荐文章于 2023-01-23 18:14:47 发布

一夜醒来头秃了

最新推荐文章于 2023-01-23 18:14:47 发布

阅读量156

点赞数 1

文章标签： javascript ajax

本文链接：https://blog.csdn.net/hs1219462412/article/details/114002068

版权

切记用live server打开页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.boss {
				margin: 30px;
			}

			.box {
				width: 300px;
				height: 420px;
				background: palevioletred;
			}

			.imgwrap {
				width: 300px;
				height: 300px;
				background: palegoldenrod;
			}

			.imgwrap img {
				width: 100%;
				height: 100%;
			}

			.msg {
				height: 70px;
				width: 280px;
				font-size: 14px;
				/* text-indent: 2em; */
				text-align: justify;
				margin: 0 10px;
			}

			.name {
				height: 50px;
				width: 300px;
				margin-left: 10px;
				line-height: 50px;
			}

			.inpbox {
				width: 300px;
				height: 30px;
			}

			.inpbox input {
				height: 30px;
				width: 250px;
				outline: none;
				border-bottom: 0;
				padding-left: 10px;
				font-size: 16px;
				box-sizing: border-box;
				float: left;
			}

			.inpbox button {
				height: 30px;
				width: 50px;
				border: 0;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="boss">
			<div class="inpbox">
				<input type="text" name="" id="" value="" placeholder="搜索内容" />
				<button type="button">查找</button>
			</div>
			<div class="box">
				<div class="imgwrap">
					<img src="" id="changeImg">
				</div>
				<div class="name">
					123
				</div>
				<div class="msg">
					123
				</div>
			</div>
		</div>


	</body>
	<script type="text/javascript">
		const btn = document.querySelector('button');
		const inp = document.querySelector('input');
		const changeImg = document.querySelector('#changeImg');
		const phoneId = document.querySelector('.name');
		const phoneMsg = document.querySelector('.msg');

		let xhr;
		// 请求对象兼容处理
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject('Mcrosoft.XMLHTTP');
		}
		// 设置请求方式、地址、异步
		xhr.open('GET', 'dataList.json', true);
		// 发送请求
		xhr.send();
		// 创建请求状态变化事件
		xhr.onreadystatechange = function() {
			// 响应就绪  请求成功
			if (xhr.readyState === 4 && xhr.status === 200) {
				succeed();
			}
		}

		function succeed() {
			// 获取JSON数据并将其转化成数组对象
			let str = xhr.responseText;
			let data = JSON.parse(str);
			changeImg.src = data[0].goodsImg;
			phoneId.innerHTML = data[0].goodsName + ' ￥' + data[0].goodsPrice;
			phoneMsg.innerHTML = data[0].goodsMsg;
		}

		btn.addEventListener('click', function() {
			// 获取输入框值
			let inpVal = inp.value;
			// 获取JSON数据并将其转化成数组对象
			let str = xhr.responseText;
			let data = JSON.parse(str);
			// console.log(data);
			let goodsNames = [];
			for (let i in data) { // 遍历数据 获取手机名
				goodsNames.push(data[i]['goodsName']);
			}
			// 获取搜索的手机名
			let phone_name = goodsNames.filter(function(val, index) {
				if (val.indexOf(inpVal) !== -1) {
					return val;
				}
			})
			let str_name = phone_name.join('');
			let index;
			for(let i in data){ // 筛选后获取角标
				if(data[i]['goodsName'] === str_name){
					index = i;
				}
			}
			// console.log(index);
			changeImg.src = data[index].goodsImg;
			phoneId.innerHTML = data[index].goodsName + ' ￥' + data[index].goodsPrice;
			phoneMsg.innerHTML = data[index].goodsMsg;
		})
	</script>
</html>

JSON数据

这是我用的数据
[{
“goodsId”: “A001”,
“goodsName”: “华为 HUAWEI P40 Pro”,
“goodsMsg”: “华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G”,
“goodsImg”: “https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg”,
“goodsPrice”: 5988,
“buyNum”: 1
}, {
“goodsId”: “A002”,
“goodsName”: “Apple iPhone 11”,
“goodsMsg”: “Apple iPhone 11 (A2223) 128GB 黑色移动联通电信4G”,
“goodsImg”: “https://img10.360buyimg.com/n7/jfs/t1/41566/13/14792/149059/5d7809a7E99b4ed1b/56ea66c5f8a6f724.jpg”,
“goodsPrice”: 5999,
“buyNum”: 1
}, {
“goodsId”: “A003”,
“goodsName”: “一加8Pro OnePlus”,
“goodsMsg”: “一加8Pro OnePlus 1+8Pro 5G手机2K+120Hz 青空色”,
“goodsImg”: “https://img13.360buyimg.com/n7/jfs/t1/131844/26/2030/179283/5ee212b8E6037a065/8ebdf06de22e64e0.jpg”,
“goodsPrice”: 5399,
“buyNum”: 1
}, {
“goodsId”: “A003”,
“goodsName”: “小米10pro”,
“goodsMsg”: “小米10pro 双模5G游戏手机【至高12期分期0首付】珍珠白 12G+256G”,
“goodsImg”: “https://img12.360buyimg.com/n7/jfs/t1/130507/6/2419/623986/5eea0995E7333f0e8/7ebbebf5a6312e30.png”,
“goodsPrice”: 4928,
“buyNum”: 1
}]

一夜醒来头秃了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 请求JSON数据根据搜索动态变化内容

切记用live server打开页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .boss { margin: 30px; } .box { w
复制链接

扫一扫