使用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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
vue-model实现简易计算器
Aug 17 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python删除服务器文件代码示例
2018/02/09 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python实现批处理文件
2020/07/28 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
应届毕业生求职信范文
2013/12/18 职场文书
单位单身证明范本
2014/01/11 职场文书
导购员的岗位职责
2014/02/08 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis