使用JavaScript获取Request中参数的值方法


Posted in Javascript onSeptember 27, 2016

假设现在有一个URL,如下。

https://3water.com

如何通过JS访问到id和name里面的值呢,实现我们来分析一下思路。

先获取当前页面的URL,通过window.location.href。

提取该URL?后面的部分,通过slice()方法。

把获取到的Request对象分割成字符串数组,通过split() 方法。

接下来看代码。

function getUrlVars() {
  var vars = [],
    hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}

接下来就是获取指定参数的值了,代码如下。

var id = getUrlVars()["id"]; 
var name = getUrlVars()["name"];

最后,我们再看看jQuery的写法。

$.extend({
  getUrlVars: function() {
    var vars = [],
      hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name) {
    return $.getUrlVars()[name];
  }
});
var id = $.getUrlVar('id');
var name = $.getUrlVar('name');

以上就是小编为大家带来的使用JavaScript获取Request中参数的值方法的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
详解JavaScript权威指南之对象
Sep 27 #Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 #Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 #Javascript
ReactNative页面跳转实例代码
Sep 27 #Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 #Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 #Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 #Javascript
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php数组指针操作详解
2017/02/14 PHP
PHP 8新特性简介
2020/08/18 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
Python单例模式实例分析
2015/01/14 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
中学教师自我鉴定
2014/02/07 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
劳资员岗位职责
2015/02/13 职场文书
2015年暑期见闻
2015/07/14 职场文书
2015年小学财务工作总结
2015/07/20 职场文书