使用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 非图片动态loading效果实现代码
Apr 09 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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
PHP 柱状图实现代码
2009/12/04 PHP
php 如何获取数组第一个值
2013/08/06 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python脚本处理空格的方法
2016/08/08 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python3下pygame如何实现显示中文
2020/01/11 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
初二物理教学反思
2014/01/29 职场文书
司马光教学反思
2014/02/01 职场文书
中秋节活动总结
2014/08/29 职场文书
大学生作弊检讨书
2014/09/11 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
新年寄语2016
2015/08/17 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
python基础之//、/与%的区别详解
2022/06/10 Python