使用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 相关文章推荐
javascript document.execCommand() 常用解析
Dec 14 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 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
文件上传类
2006/10/09 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
繁简字转换功能
2006/07/19 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python matplotlib中文显示参数设置解析
2017/12/15 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
群胜软件Java笔试题
2012/09/29 面试题
高校优秀辅导员事迹材料
2014/05/07 职场文书
教师求职信
2014/06/17 职场文书
工作推荐信模板
2015/03/25 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
python开发制作好看的时钟效果
2022/05/02 Python