一个页面传入传参serch得到另一个页面的实现
建立相应的数据 在该数据后面加上?(serch参数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #000;
font-size: 50px;
color: brown;
display: inline-block;
}
</style>
</head>
<body>
<div>
<!-- ./5.detail.html?product_id=1001 1001 就是端口号指定的位置内容 -->
<a href="./跳转之后.2.html?serch_id=1001">
<div>华为</div>
</a>
</div>
<div>
<a href="./跳转之后.2.html?serch_id=1002">
<div>小米</div>
</a>
</div>
<div>
<a href="./跳转之后.2.html?serch_id=1003">
<div>苹果</div>
</a>
</div>
</body>
</html>
另一个页面的实现
让其上一个页面每次跳转的id与该页面的id(参数)保持一致就行完成跳转
两个if的判断 首先是如果传参不是上方传参则失败
要么是 让其id 与上文id相对比 (使用 split进行数组分割从=分割得到数组 在利用下标得到id)
开始渲染数据
l利用for循环date里的数组
if再次 // 判断数据的id是否与传参的id相同
如果等于则输出
date下的goodsname
date下的 price
date下的 nums
最后输出到div
content.innerHTML = str;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content">
内容
</div>
</body>
<script>
var goods = {
code:200,
data:[
{
id:1001,
goodsname:'华为',
price:1900,
nums:100
},
{
id:1002,
goodsname:'红米',
price:2900,
nums:50
},
{
id:1003,
goodsname:'苹果',
price:3900,
nums:10
}
]
}
//渲染数据
var search = window.location.search;
// if判断上方页面传过来了search的传参与数据中的参数是否对应
if(!search){
content.innerHTML = '内容不在了';
}else{
//另当前页面地址中获取参数与上以页面的传参数据进行比较传进来那个数据id则输出哪个内容
var id=search.split('=')[1];
// console.log(id);
var data = goods.data;
var str=""
for(var i=0;i<data.length;i++){
// 判断数据的id是否与传参的id相同
if(data[i].id==id){
str+=`<h1>${data[i]. goodsname}</h1>`
str+=`<p>价格${data[i].price}</p>`
str+=`<p>优惠折扣${data[i].nums}</p>`
}
}
content.innerHTML = str;
}
</script>
</html>