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 并吧 a.html 的值传入b.html a.html New Document function to (){...

在静态页面html中跳转传值

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

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

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

html 页面之间跳转和传值

2013-06-05 14:28 1024人阅读 评论(1) 收藏 举报 从a.html 跳转到b.html 并吧 a.html 的值传入b.html a.html New D...

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

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

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

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

jsp页面间的传值方法以及jq实现传值

JSP页面间传递参数是经常需要使用到的功能,有时还需要多个JSP页面间传递参数。下面介绍一下实现的方法。 (1)直接在URL请求后添加 如:直接传递参数 特别的在使用response.sendR...

jquery在两个HTM页面之间跳转传递参数

页面一,待tiaoz
  • Metal1
  • Metal1
  • 2014-06-13 09:57
  • 9299

Jquery在两个HTML页面之间传递参数

待跳转页面JS: function openreverspage() {     var row = $("#dg").datagrid('getSelected');     alert(.....

html两个页面跳转时传递参数location.search

html两个页面跳转时传递参数location.search
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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