使用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中Get和Set访问器的实现代码
Sep 19 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
详解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
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
PHP反射基础知识回顾
2020/09/10 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Vue js with语句原理及用法解析
2020/09/03 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python中cPickle类使用方法详解
2018/08/27 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
初一地理教学反思
2014/01/16 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
最美乡村教师观后感
2015/06/11 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
python通过opencv调用摄像头操作实例分析
2021/06/07 Python