使用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 offsetX与layerX区别
Mar 12 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
vue配置接口域名方法总结
May 12 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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
Zend引擎的发展 [15]
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
一个捕获函数输出的函数
2007/02/14 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
深入理解NumPy简明教程---数组1
2016/12/17 Python
python的中异常处理机制
2018/08/30 Python
django将数组传递给前台模板的方法
2019/08/06 Python
用python批量下载apk
2020/12/29 Python
城市规划毕业生求职信
2013/10/10 职场文书
会计专业导师推荐信
2014/03/08 职场文书
战友聚会主持词
2014/04/02 职场文书
捐款通知怎么写
2015/04/24 职场文书
公诉意见书范文
2015/06/05 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书