实现页面之间的参数传递

最新推荐文章于 2022-05-16 23:56:58 发布

Web攻城狮

最新推荐文章于 2022-05-16 23:56:58 发布

阅读量859

点赞数 1

分类专栏： jQuery 文章标签：实现页面之间的参数传递 Js 基础学习参数传递 url 字符串截取

本文链接：https://blog.csdn.net/b1244154318/article/details/52555160

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现页面之间的参数传递

当我们在本界面需要接受上一个界面传来的参数时，我们应该怎么做，比如我们做一些电商网站，对于商品详情页，我们需要从上一个界面传来参数，然后根据传来的参数，这是一般传来的是商品的id等，我们根据传来参数利用AJAX取对应的数据，完成数据的显示。

下面是一个简单的例子，来实现简单的页面传参。当理解了之后，就可以与ajax结合实现从json数据中取进行判断显示了。下面所用的jquery就是一个jquery类库,哪个版本都可以。

直接上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>页面传参</title>
<style>
   *{
	margin:0;
	padding:0;
    }
   ul,li{
	list-style:none;
   }
  a{
	text-decoration:none;
  }
</style>
</head>
<body>
<ul>
    <li><a href="detail.html?id=苹果">苹果</a></li>
    <li><a href="detail.html?id=香蕉">香蕉</a></li>
    <li><a href="detail.html?id=橘子">橘子</a></li>
    <li><a href="detail.html?id=西瓜">西瓜</a></li>
</ul>
</body>

</html>

在这里通过window下的对象location下的search属性我们就可以找到？之后的东西，再利用剪切函数进行剪切就可以得到我们需要的id了，至于传递的其他参数亦是这个道理。跳转的界面如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1></h1>
</body>
<script src="jquery.js"></script>
<script>
    var str=decodeURI(window.location.search.substr(1));
console.log(str);
    var arr=str.split("&");

    var obj={};
    $(arr).each(function(){
        var arr=this.split("=");
        obj[arr[0]]=arr[1];
    })

    $("h1").html(obj.id)


</script>
</html>

Web攻城狮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现页面之间的参数传递

实现页面之间的参数传递当我们在本界面需要接受上一个界面传来的参数时，我们应该怎么做，比如我们做一些电商网站，对于商品详情页，我们需要从上一个界面传来参数，然后根据传来的参数，这是一般传来的是商品的id等，我们根据传来参数利用AJAX取对应的数据，完成数据的显示。下面是一个简单的例子，来实现简单的页面传参。当理解了之后，就可以与ajax结合实现从json数据中取进行判断显示了。下
复制链接

扫一扫

专栏目录