使用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实现DIV的一些简单控制
Jun 04 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 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程序
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
javascript中的location用法简单介绍
2007/03/07 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
Python实现比较两个列表(list)范围
2015/06/12 Python
Django视图和URL配置详解
2018/01/31 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
同居协议书范本
2014/04/23 职场文书
中学生检讨书范文
2014/11/03 职场文书
单位未婚证明范本
2014/11/25 职场文书
给老师的感谢信
2015/01/20 职场文书
担保书格式范文
2015/09/22 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript