使用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 相关文章推荐
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
介绍Python中几个常用的类方法
2015/04/08 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python 处理文件的几种方式
2019/08/23 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
超市营业员岗位职责
2013/12/20 职场文书
八年级英语教学计划
2015/01/23 职场文书
python中%格式表达式实例用法
2021/06/18 Python