使用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 相关文章推荐
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
js中new一个对象的过程
Feb 20 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
vue实现2048小游戏功能思路详解
May 09 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
利用Python破解斗地主残局详解
2017/06/30 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
如何运行带参数的python脚本
2019/11/15 Python
python logging模块的使用详解
2020/10/23 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
银行学习十八大感想
2014/01/11 职场文书
社区八一活动方案
2014/02/03 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
西游降魔篇观后感
2015/06/15 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL