JavaScript获取URL参数的两种实现方式

JavaScript获取URL参数的两种实现方式

本文主要介绍如何利用JavaScript从URL（request）中提取参数。

在前端开发中，为了便于页面交互，通常会在<script>标签内通过设置window.location.href="目标页面?参数1="+值1+"&参数2="+值2的方式完成页面跳转并传递数据。

那么，在跳转后的新页面中，如何获取并解析这些传递过来的参数呢？

以下是一个具体的应用案例。

//参数传出页面

window.location.href = "Frameset.aspx?name=" + username + "&tbpwd="+tbpwd; //此处将username和tbpwd作为参数传递至Frameset.aspx页面

一、字符串分割分析法

//参数接收页面(Frameset.aspx)

 <script type="text/javascript" language="javascript">
    $(function () {
      var url = location.search;       ////获取接收到的url中含"?"符后的字串
      var request = new Object();     //实例化一个对象
      if (url.indexOf("?") != -1) {      //判断“？”后面是否有值
        var str = url.substr(1)       //去掉括？号
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++){
          request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);//将参数和对应的值使用split函数切割出来
        }
      }
　　　//以此获取url串中所带的同名参数

      alert(request["name"]);
      alert(request["tbpwd"]);
    })
  </script>

二、正则分析法

 <script type="text/javascript" language="javascript">
function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
  var r = window.location.search.substr(1).match(reg);
  if (r!=null) return unescape(r[2]);
  return null;
}
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
</script>

上述两种方法均能有效实现通过window.location.href进行页面跳转及传参，并在目标页面成功接收参数。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。