使用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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
js onclick事件传参讲解
Nov 06 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
总结js函数相关知识点
Feb 27 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
Rust中的Struct使用示例详解
Aug 14 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
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
jQuery hover 延时器实现代码
2011/03/12 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Python 实现进度条的六种方式
2021/01/06 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
新闻专业个人求职信
2013/12/19 职场文书
小学教学随笔感言
2014/02/26 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
民主生活会剖析材料
2014/09/30 职场文书
责任书格式
2015/01/29 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
追悼会悼词大全
2015/06/23 职场文书
会计入职心得体会
2016/01/22 职场文书
Python合并pdf文件的工具
2021/07/01 Python