js 地址的封装以及地址栏的参数获取

news/2024/7/1 12:31:08

有时候我们封装一个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

http://lihuaxi.xjx100.cn/news/242968.html

相关文章

Android layer-list(3)

Android layer-list(3) 在附录文章3、4的基础上,就Android layer-list再写一个较为复杂的应用。 先写布局文件,该布局涉及到LinearLayoutCompat,关于LinearLayoutCompat参看附录文章5。 布局文…

leetcode--两数之和--python

文章目录题目题目详情示例解题代码代码运行结果体会题目 题目详情 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是,你不能重复…

LVM逻辑盘卷管理

一、简介LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵活性。LVM的工作原理是通过将底层的物理硬盘…

Java培训学习步骤有哪些

最近几年,有很多学习java技术的同学都有过半途而废的想法,认为java零基础是很难学会的,其实出现这样的问题,最主要的原因就是学习方法有问题,下面小编整理的Java培训学习步骤,希望能够帮助大家更有效的学习…

bzoj3442 学习小组

目前处于迷之TLE状态 -----6.21更新 已AC 3442: 学习小组 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 200 Solved: 87Description 【背景】坑校准备鼓励学生参加学习小组。【描述】共有n个学生,m个学习小组,每个学生有一定的喜好,只愿…

leetcode--对称二叉树--python

文章目录题目题目详情示例说明解题代码代码运行结果体会题目 题目详情 给定一个二叉树,检查它是否是镜像对称的。 示例 例如,二叉树 [1,2,2,3,4,4,3] 是对称的。 1/ \2 2/ \ / \ 3 4 4 3但是下面这个 [1,2,2,null,3,null,3] 则不是镜像对称的: 1…

找Java培训机构需要注意那些

​ java技术在互联网行业已经是众所周知的一个编程热门技术,市面上也出现了很多java培训机构,那么想要找到一个适合自己且比较专业的java培训机构应该注意哪些呢?下面小编就为大家详细的介绍一下找Java培训机构需要注意那些? ​  找Java培训机构需要…

国内阿里Maven仓库镜像Maven配置文件Maven仓库速度快

国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用。 最新更新:2016年11月11日 18:05:40 阿里云提供Maven私服,我把配置文件贴一下,自己放在maven的conf下就行,setti…