关注我们

location.search 通过地址栏实现页面之间的数据传输

jiahuajiahua 前端技术 2018-05-11 399 1

index.html

<!DOCTYPE html><html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#btn").click(function() {                    
                    var una = $("#uname").val();
                    $("#ua").html(una);
                    $("#ua").attr("href", "test.html?name=" + una);
                    $(".u-div").hide();
                })
            });        
         </script>
    </head>

    <body>
        <div class="container in-div">
            <div class="row">
                <h1 class="page-header col-md-12">
                <a id="ua" href="#"></a>
            </h1>
                <div class="col-md-12 u-div">
                    <div class="col-md-12">
                        <label for="uname">用户名:</label>
                        <input type="text" name="" id="uname" value="" />
                    </div>
                    <div class="col-md-12">
                        <button id="btn">登录</button>
                    </div>
                </div>

            </div>
        </div>
    </body></html>

Test.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/jQStr.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#dm-ua").text(GetQueryString("name"));
            });        </script>
    </head>

    <body>
        <div class="container dm-div">
            <div class="row">
                <h1 class="col-md-12 page-header">
                <a id="dm-ua" href="#"></a>
            </h1>
            </div>
        </div>
    </body>
 </html>

JS字符串处理方法-jQStr.js

 function GetQueryString(name)  {     
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");     
     var r = window.location.search.substr(1).match(reg);     
     if(r!=null)return  unescape(r[2]); return null
  }


版权声明

本文仅代表作者观点,不代表本站立场。
文章如未标注转载均为本站原创,自由转载请表明出处《家华同学》。

喜欢0发布评论

1条评论

发表评论

  • 昵称(必填)
  • 邮箱
  • 网址