使用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知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
基于jquery的表格排序
2010/09/11 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
使用JS动态显示文本
2017/09/09 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
解决Mac下使用python的坑
2019/08/13 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python super()函数的基本使用
2020/09/10 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
料理师求职信
2014/01/30 职场文书
优秀护士获奖感言
2014/02/20 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
教师年度考核个人总结
2015/02/12 职场文书
工程催款通知书
2015/04/17 职场文书
大学生读书笔记大全
2015/07/01 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js