利用location的search进行传参

最新推荐文章于 2024-09-04 20:18:34 发布

粥里面放点糖

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量112

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_80137119/article/details/134437509

版权

一个页面传入传参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>

粥里面放点糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用location的search进行传参

要么是让其id 与上文id相对比（使用 split进行数组分割从=分割得到数组在利用下标得到id）让其上一个页面每次跳转的id与该页面的id（参数）保持一致就行完成跳转。if再次 // 判断数据的id是否与传参的id相同。建立相应的数据在该数据后面加上？两个if的判断首先是如果传参不是上方传参则失败。一个页面传入传参serch得到另一个页面的实现。l利用for循环date里的数组。date下的goodsname。date下的 price。date下的 nums。
复制链接

扫一扫