基于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 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
jquery+json实现分页效果
Mar 07 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
微信小程序实现锚点跳转
Nov 23 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
php生成随机密码的三种方法小结
2010/09/04 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
Python 迭代器工具包【推荐】
2016/05/06 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python中类与对象之间的关系详解
2020/12/16 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
老总助理工作岗位职责
2014/02/06 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
学校就业推荐信范文
2014/05/19 职场文书
物流管理专业推荐信
2014/09/06 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
2016国庆促销广告语
2016/01/28 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL