前端参数接收

最新推荐文章于 2023-04-28 10:00:00 发布

Hermia_yuan

最新推荐文章于 2023-04-28 10:00:00 发布

阅读量851

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Hermia_yuan/article/details/123621690

版权

<body>
    <ul>
        <li><a href="content.html?id=1&title=打通产学研 串起价值链 &dsfhv">打通产学研 串起价值链</a></li>
        <li><a href="content.html?id=2&titl=北大教授劝年轻人别太早买房 年轻人或有不同看法"> 北大教授劝年轻人别太早买房 年轻人或有不同看法</a></li>
        <li><a href="content.html?id=3&title=油价或迎年内“第五涨” 加一箱油多花32元左右">油价或迎年内“第五涨” 加一箱油多花32元左右</a></li>
        <li><a href="content.html?id=4&title=中国驻日使馆：暂未收到在日华人伤亡报告">中国驻日使馆：暂未收到在日华人伤亡报告</a></li>
        <li><a href="content.html?id=5&title=上海外防输入压力为何这么大？">上海外防输入压力为何这么大？</a></li>
    </ul>
</body>

在新建的content.html文件中接收参数

<script>
var url=location.href;
    var params=url.split("?");
    console.log(params);  //0: "file:///D:/js/%E4%BD%9C%E4%B8%9A/%E5%8F%98%E9%87%8F/content.html"
                          //1: "id=1&title=%E6%89%93%E9%80%9A%E4%BA%A7%E5%AD%A6%E7%A0%94%20%E4%B
    var str=params[1];   //选择数组1   id=1&title=%E6%89%93%E9%....
    console.log(str);  // id=1&title=%E6%89%93%E9%80%9A%E4%BA%A7%E5%AD%A6%E7%A0%94%20%E4%B8%B2%E8%B5%B7%E4%BB%B7%E5%80%BC%E9%93%BE
    
    if(str.includes("&")){    //判断str=params[1]里是否含有“&”
          var arr=str.split("&")   //拆分&前后部分
          console.log(arr)    
          //0: "id=1"
          //1: "title=%E6%89%93%E9%80%9A%E4%BA%A7%E5%AD%A6%E7%A0
    var paramlist = [];
    for(key in arr){
        var valarr=arr[key].split("=");
        console.log(valarr);
        //arr[key] 代表arr这个对象中key这个变量值对应的属性值
        //arr.key  代表 arr这个对象的key属性的值
        // ['id', '1']
        // ['title', '%E6%89%93']
        var k=valarr[0];  //定义 id title =k   
        paramlist[k]= valarr[1]    //valarr[1] =  '1'   '%E6%89%93'
    }
    console.log(paramlist)
    }else{              //如果str不含有&，则从“=”开始拆分
        var id=str.split("=")[1];
        console.log(id);
    }
    document.write(`<h1>${paramlist["id"]}</h1>`)
    document.write(`<h1>${decodeURI(paramlist["title"])}</h1>`)
</script>

输出id 和title