使用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中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 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
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
PyQt5每天必学之组合框
2018/04/20 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
详解Python self 参数
2019/08/30 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python之array赋值技巧分享
2019/11/28 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
美国钻石商店:Zales
2016/11/20 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
毕业生自我鉴定
2013/11/05 职场文书
吨的认识教学反思
2014/04/27 职场文书
万里长城导游词
2015/01/30 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL