查看: 825|回复: 0

[JavaScript/JQuery] js 地址的封装以及地址栏的参数获取

发表于 2017-4-20 08:00:01

有时候我们封装一个ajax的get的方法需要把对象拼接到地址上面,这里我介绍一个Object.keys,这是一个非常好用对象属性。
例如说

  1. const url = 'http://127.0.0.1:4000';
  2. const params = {
  3. name: 'testname',
  4. email: 'testemail@'
  5. }
  6. // 这里我们需要得到的一个是
  7. http://127.0.0.1:4000?name=testname&email=testemail@
复制代码

还有就是 从url的的某个参数获取对应的值,例如

  1. http://127.0.0.1:4000?name=testname&email=testemail@
  2. GetQueryString('name') // testname
复制代码
先介绍一下Object.keys

Object.keys()返回一个数组的元素是字符串对应可列举的发现直接在对象属性。属性的顺序是一样的,由手动循环在对象的属性。
例如

  1. // 传入字符串,数组,返回索引
  2. var arr = ['a', 'b', 'c'];
  3. console.log(Object.keys(arr)); // console: ['0', '1', '2']
  4. // 传入对象,返回对象的key
  5. var obj = { 0: 'a', 1: 'b', 2: 'c' };
  6. console.log(Object.keys(obj)); // console: ['0', '1', '2']
  7. var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
  8. console.log(Object.keys(an_obj)); // console: ['2', '7', '100']
  9. // getFoo is property which isn't enumerable
  10. var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
  11. my_obj.foo = 1;
  12. console.log(Object.keys(my_obj)); // console: ['foo']
复制代码

好了 了解了Object.keys(),下面我们就可以进行地址与对象的拼接了

地址与对象拼接的代码
  1. const server = 'hettp://123.123.123.123:2000';
  2. const testParams = {
  3. 'name': 'nameyese',
  4. 'password': 'passwords'
  5. }
  6. function toUrl(url, params){
  7. let paramsArr = [];
  8. if (params) {
  9. Object.keys(params).forEach(item => {
  10. paramsArr.push(item + '=' + params[item]);
  11. })
  12. if (url.search(/\?/) === -1) {
  13. url += '?' + paramsArr.join('&');
  14. } else {
  15. url += '&' + paramsArr.join('&');
  16. }
  17. }
  18. console.log(url);
  19. // hettp://123.123.123.123:2000?name=nameyese&password=passwords
  20. }
复制代码
地址的参数取值代码 第一种方法(传统)
  1. // 字符串转对象
  2. var tstr = 'http://www.abc.com/detail?code=1&start=2017-02-01&end=2017-02-14&name=abc';
  3. function GetQueryString(name) {
  4. let index = tstr.indexOf('?')
  5. let str = tstr.substring(index + 1);
  6. let arr = str.split('&');
  7. let result = {};
  8. arr.forEach((item) => {
  9. let a = item.split('=');
  10. result[a[0]] = a[1];
  11. })
  12. return result[name];
  13. }
  14. console.log(GetQueryString('start')) // 2017-02-01
复制代码
第二种方法(正则)
  1. function GetQueryString(name)
  2. {
  3. let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
  4. let r = window.location.search.substr(1).match(reg);
  5. if(r!=null)return unescape(r[2]); return null;
  6. }
  7. // 调用方法
  8. alert(GetQueryString("start")); // 2017-02-01
复制代码


回复

使用道具 举报