基于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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
js字符编码函数区别分析
Dec 28 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
redux处理异步action解决方案
Mar 22 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 Javascript
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
用libTemplate实现静态网页的生成
2006/10/09 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
nginx 设置多个站跨域
2021/03/09 Servers
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python类的继承用法示例
2019/01/31 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
理工科学生的自我评价
2013/12/15 职场文书
护士检查书
2014/01/17 职场文书
安全标准化汇报材料
2014/02/03 职场文书
电子银行营销方案
2014/02/22 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
见习报告的格式
2014/10/31 职场文书
平安建设汇报材料
2014/12/29 职场文书
大学军训决心书
2015/02/05 职场文书
综合素质评价自我评价
2015/03/06 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
2016年感恩节寄语
2015/12/07 职场文书