js 地址的封装以及地址栏的参数获取
有时候我们封装一个ajax的get的方法需要把对象拼接到地址上面,这里我介绍一个Object.keys,这是一个非常好用对象属性。
例如说
const url = 'http://127.0.0.1:4000';
const params = {name: 'testname',email: 'testemail@qq.com'
}
// 这里我们需要得到的一个是
http://127.0.0.1:4000?name=testname&email=testemail@qq.com
还有就是 从url的的某个参数获取对应的值,例如
http://127.0.0.1:4000?name=testname&email=testemail@qq.com
GetQueryString('name') // testname
先介绍一下Object.keys
Object.keys()返回一个数组的元素是字符串对应可列举的发现直接在对象属性。属性的顺序是一样的,由手动循环在对象的属性。
例如
// 传入字符串,数组,返回索引
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']// 传入对象,返回对象的key
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(an_obj)); // console: ['2', '7', '100']// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 1;console.log(Object.keys(my_obj)); // console: ['foo']
好了 了解了Object.keys(),下面我们就可以进行地址与对象的拼接了
地址与对象拼接的代码
const server = 'hettp://123.123.123.123:2000';
const testParams = {'name': 'nameyese','password': 'passwords'
}
function toUrl(url, params){let paramsArr = [];if (params) {Object.keys(params).forEach(item => {paramsArr.push(item + '=' + params[item]);})if (url.search(/\?/) === -1) {url += '?' + paramsArr.join('&');} else {url += '&' + paramsArr.join('&');}}console.log(url);// hettp://123.123.123.123:2000?name=nameyese&password=passwords
}
地址的参数取值代码
第一种方法(传统)
// 字符串转对象
var tstr = 'http://www.abc.com/detail?code=1&start=2017-02-01&end=2017-02-14&name=abc';
function GetQueryString(name) {let index = tstr.indexOf('?')let str = tstr.substring(index + 1);let arr = str.split('&');let result = {};arr.forEach((item) => {let a = item.split('=');result[a[0]] = a[1];})return result[name];
}console.log(GetQueryString('start')) // 2017-02-01
第二种方法(正则)
function GetQueryString(name)
{let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");let r = window.location.search.substr(1).match(reg);if(r!=null)return unescape(r[2]); return null;
}// 调用方法
alert(GetQueryString("start")); // 2017-02-01
js 地址的封装以及地址栏的参数获取相关推荐
- js获取地址栏url以及获取url参数
js原生态写法 代码如下 复制代码 function getUrlParam(name) { var reg = new RegExp("(^|&)"+ name ...
- JS类的封装及实现代码
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...
- php 正则替换url参数,JavaScript正则获取地址栏中参数的方法分享
这篇文章主要介绍了JavaScript正则获取地址栏中参数的方法,涉及javascript基于正则的字符串截取操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了JavaScript正则获取地址栏中 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 分享一个好用的函数吧,将js中的对象转成url参数
这个函数呢是自己在写基于Vue+ElementUI管理后台时用到的,,下面列出来两种使用方式: 最普通的,封装一个js函数 /*** 对象转url参数* @param {*} data* @param ...
- 【JS逆向系列】某乎x96参数与jsvmp初体验
[JS逆向系列]某乎x96参数与jsvmp初体验 js分析 jsvmp分析 第一种解决方案-补环境 第二种解决方案-修改操作码 第三种解决方案-算法还原 参考文章 样品网址:aHR0cHM6Ly93d ...
- common.js 通用方法封装
/*** 通用方法封装处理** Created by on 2018/9/7*/ (function ($) {var $table = $('#table');$.extend({/*** 表格封装 ...
- [原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
- Android和JS之间互相调用方法并传递参数
场景 Android中使用WebView加载本地html并支持运行JS代码和支持缩放: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
最新文章
- Asp.net后台创建HTML
- QT 烦人的parent该如何理解
- 群晖阿里云域名解析_群晖套件系列六:Web station的安装与使用
- 什么是Windows Service应用程序?(转)
- python note 15 正则表达式
- 操作系统之文件管理:5、文件物理结构(连续分配、链式(显式、隐式)分配、索引分配(链接、多层索引、混合索引))
- thunderx 循环获得_湖北专业生产CY310热循环风机厂商
- redis数据类型:hashes
- 地老天荒只是一个华丽的传说
- CSS行内样式内部样式外部样式
- leaflet 加载海量点位,点击marker 查看详情功能
- 广播电视相关信息系统 安全等级保护基本要求
- JAVA之socket编程服务器与客户端通信--实现简易聊天室
- webp文件如何进行格式转换
- 2014年元旦放假安排,又一个坑爹的假日
- 云知识 - OMA-DM 和OTA的关系
- Android 日历提供器(二)
- ORA-12545 / TNS-12545
- 【PLC】Q02HCPU USB驱动安装
- 音量增强器和均衡器Boom 3D mac中文版
热门文章
- mysql binlog恢复错误_mysql通过binlog日志来恢复数据
- 编写一个最简单的.php,学习猿地- 说明 如果我们要编写一个简单的PHP脚本,需要学习哪些...
- 数据验证html,JavaScript 表单数据验证
- php与nginx通讯方式,[Linux]PHP-FPM与NGINX的两种通讯方式
- v-html解析的相对地址img 显示不出来_人工智能专题作品解析——APPInventor安卓应用开发AI图像识别简单应用...
- sftp shell 批量上传文件_Shell自动上传下载文件到SFTP服务器
- oracle判断非空并拼接,oracle sql 判断字段非空,数据不重复,插入多跳数据
- mysql如何下载连接到visual_Visual Studio 2015 Community连接到Mysql
- java jdk 8u111_8u111-jdk-alpine在java开发中的NullPointerException错误解决方案
- xcode 消除警告