基于JavaScript获取url参数2种方法


Posted in Javascript onApril 17, 2020

这次是使用JavaScript来获取url(request)中的参数

在日常页面编写的过程中为了方便操作在<script>中通过使用window.location.href="要跳转的页面?参数1=" rel="external nofollow" +值1+"&参数2="+值2 来进行页面跳转并传值。

那么在跳转过去的页面怎样在<script>中获取到传过来的参数呢?

下面是小编的一个案例:

//参数传出页面

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>

以上两种方法都是可以实现js通过window.location.href进行页面跳转及传参后在跳转后的页面接收到参数!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js显示当前时间示例
Mar 02 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
JavaScript如何操作css
Oct 24 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 #Javascript
vue fetch中的.then()的正确使用方法
Apr 17 #Javascript
如何基于filter实现网站整体变灰功能
Apr 17 #Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 #Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 #Javascript
vue制作抓娃娃机的示例代码
Apr 17 #Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 #Javascript
You might like
无线电的诞生过程
2021/03/01 无线电
德劲1104的电路分析与改良
2021/03/01 无线电
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python仿抖音表白神器
2019/04/08 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
高一化学教学反思
2014/02/05 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
2019各种保证书范文
2019/06/24 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP