HTML页面之间跳转传值

原创 2016年04月19日 18:44:12

1.借助JQuery,通过URL拼接,从而传递数据。

  jquery.params.js用于两个HTML网页之间的传值。a.html?name=waley&age=20;b.html页面则可以这样获取:$.query.get("name)。

 例如;将a.html页面的数据传递到b.html页面:

a.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery.params.js"></script>
    <title>a页面</title>
    <script>
        $(function(){
             name = $("#name").text();
             age = $("#age").text();

            $("#btn").on("click",function(){
               jump1();
            });
        });

        function jump1(){
            url = "b.html?name="+name+"&age="+age;//此处拼接内容
            window.location.href = url;
        }
    </script>
</head>
<body>
   <div id="name">wey</div>
   <div id="age">20</div>
   <button id="btn">跳转</button>
</body>
</html>

b.html页面通过$.query.get("name)获取。

b.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery.params.js"></script>
    <title>b页面</title>
    <script>
        $(function(){
           getData1();
        });


        function getData1(){
            var name = $.query.get("name");
            var age = $.query.get("age");

            $("#name").text(name);
            $("#age").text(age);
        }
    </script>
</head>
<body>
   <div id="name"></div>
   <div id="age"></div>
</body>
</html>


2.利用JavaScript Cookies来保存页面之间的信息:

在a.html页面中将数据存入到document.cookie;

a.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-2.2.3.min.js"></script>
    <title>a页面</title>
    <script>
        $(function(){
             name = $("#name").text();
             age = $("#age").text();

            $("#btn").on("click",function(){
                jump2();
            });
        });

        function jump2(){
            document.cookie = "name="+name;
            document.cookie = "age="+age;
            window.location.href = "b.html";
        }
    </script>
</head>
<body>
   <div id="name">wey</div>
   <div id="age">20</div>
   <button id="btn">跳转</button>
</body>
</html>

在b.html中获取cookie的值,并使用split(';')将值进行切割,获得多个数组,然后循环读取出里面的值;

b.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery.params.js"></script>
    <title>b页面</title>
    <script>
        $(function(){
            getData2();
        });

        function getData2(){
            var name=getCookie("name");
            var ages = getCookie("age");
            if (name!="")
            {
                $("#name").text(name);
            }
            if(ages!=""){
                $("#age").text(ages);
            }
        }

       //循环得到相应的值
        function getCookie(cname)
        {
            var ss = document.cookie;
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++)
            {
                var c = ca[i].trim();
                if (c.indexOf(name)==0)
                    return c.substring(name.length,c.length);
            }
            return "";
        }
    </script>
</head>
<body>
   <div id="name"></div>
   <div id="age"></div>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

前端在html页面之间传递参数的方法

项目中经常会出现的一种情况,有一个列表,譬如是案例列表,点击列表中的某一项,跳转至详情页面。详情是根据所点击的某条记录生成的,因为案例和具体的详情页面,都是用户后期自行添加的,我们开始编写时,不可能穷...
  • liuyan19891230
  • liuyan19891230
  • 2016年03月23日 11:04
  • 50374

在两个html页面之间传值小示例

最近在搞前端的一些开发,在两个页面之间进行传值,虽然搜了写资料但是不是自己想要的,因为用到了一些框架,所有内容相当于在一个html中,与普通的两个独立的html页面直接的传递值的方法不太一样,记之,以...
  • ABC__D
  • ABC__D
  • 2016年03月08日 16:26
  • 10800

两个html页面之间传递值的方法

最近做项目,好多页面需要传递值。现在我用了以下的方法。感觉很好用。 1、利用页面链接传递,用?号链接,不过这样传递中文会麻烦些,数字挺方便的。 页面一: function to(){ var g...
  • I_am_listen
  • I_am_listen
  • 2016年12月05日 11:10
  • 3783

HTML页面间传值(JS)(window.location.search方式)

本篇博客的主角是window.location.search何为window.location.search? window.location.search Window对象的locatio...
  • u012955029
  • u012955029
  • 2017年06月04日 17:58
  • 691

JavaScript让HTML静态页面传值的方法

刚有个好友问我HTML页面之间如何传递数据,这确实是比较棘手的问题,如果是动态页面,根本就不需要考虑这个问题,可以如果是一个纯HTML+JavaScript的应用,那么就无法使用数据库等操作,没有保存...
  • hsany330
  • hsany330
  • 2015年12月08日 15:16
  • 8761

html 页面之间跳转和传值

2013-06-05 14:28 1024人阅读 评论(1) 收藏 举报 从a.html 跳转到b.html 并吧 a.html 的值传入b.html a.html New D...
  • forest_fire
  • forest_fire
  • 2016年03月21日 11:00
  • 769

HTML页面之间跳转与传值(JS代码)

http://www.cnblogs.com/mingmingcome/p/5926254.html 跳转的方法如下: 方法一: window.location.href = "b....
  • zdy0_2004
  • zdy0_2004
  • 2016年10月01日 20:18
  • 717

html页面传值问题已解决

很多时候我们做web项目的时候,会遇到html页面传值的问题,很多人知道是在一个a标签后面用一个?号,然后写属性等于一个值,,但却不知道在另一个页面如何去取出这个值来使用,下面我写了一个js代码如下:...
  • xxf159797
  • xxf159797
  • 2017年04月04日 20:43
  • 815

在静态页面html中跳转传值

在html中通过"?"传值--------静态传值 在跳转到的页面index2.html中接收----var name=UrlParm.parm("name"); 代码如下: index...
  • caoyuan10036
  • caoyuan10036
  • 2012年02月02日 09:24
  • 22073

html页面跳转传递参数

从a.html跳转到b.html页面,如果给b.html传递参数,可以通过下面的方式来传递: 直接将参数拼接到url上,如b.html?param1=aa¶m2=bb 通过正则表达式解析参...
  • gnail_oug
  • gnail_oug
  • 2016年11月22日 15:32
  • 4833
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML页面之间跳转传值
举报原因:
原因补充:

(最多只允许输入30个字)