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页面跳转传递参数

从a.html跳转到b.html页面,如果给b.html传递参数,可以通过下面的方式来传递: 直接将参数拼接到url上,如b.html?param1=aa¶m2=bb 通过正则表达式解析参...

在静态页面html中跳转传值

在html中通过"?"传值--------静态传值 在跳转到的页面index2.html中接收----var name=UrlParm.parm("name"); 代码如下: index...

js 页面之间的跳转、传参以及返回上一页

js实现html 页面之间的跳转传参以及返回上一页的相关知识点 一、页面之间的跳转传参 1、在页面之间跳转的方式有两种: window.location.href=”test.html?num=...
  • QH_JAVA
  • QH_JAVA
  • 2015年12月22日 18:05
  • 24168

js页面跳转并传值的常用方法

在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,我常用下面两种方法 1、在url路径后面带参数,参数与url之间用?隔开,参数与参数之间用&符隔开 window.l...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

html 页面之间跳转和传值

从a.html 跳转到b.html 并吧 a.html 的值传入b.html a.html New Document function to (){...

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

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

JSP页面之间传值的方法总结

B/S页面间通信 HTTP是无状态的协议。Web页面本身无法向下一个页面传递信息,如果需要让下一个页面得知该页面中的值,除非通过服务器。因此,Web页面保持状态并传递给其它页面,是一个重要的技术。 W...

JS页面间传值

一:JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子: 参数传出页面Post.htm—>   function Post(...

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

最近在搞前端的一些开发,在两个页面之间进行传值,虽然搜了写资料但是不是自己想要的,因为用到了一些框架,所有内容相当于在一个html中,与普通的两个独立的html页面直接的传递值的方法不太一样,记之,以...
  • ABC__D
  • ABC__D
  • 2016年03月08日 16:26
  • 9062
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML页面之间跳转传值
举报原因:
原因补充:

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