使用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 相关文章推荐
JS跨域总结
Aug 30 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
Python socket实现简单聊天室
2018/04/01 Python
python实时监控cpu小工具
2018/06/21 Python
Python爬取成语接龙类网站
2018/10/19 Python
对python判断是否回文数的实例详解
2019/02/08 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
django创建简单的页面响应实例教程
2019/09/06 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
pandas分组聚合详解
2020/04/10 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
《小儿垂钓》教学反思
2014/02/23 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
数学教师求职信范文
2015/03/20 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android