有时候我们封装一个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 地址的封装以及地址栏的参数获取相关推荐

  1. js获取地址栏url以及获取url参数

    js原生态写法  代码如下 复制代码 function getUrlParam(name) {     var reg = new RegExp("(^|&)"+ name ...

  2. JS类的封装及实现代码

    js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...

  3. php 正则替换url参数,JavaScript正则获取地址栏中参数的方法分享

    这篇文章主要介绍了JavaScript正则获取地址栏中参数的方法,涉及javascript基于正则的字符串截取操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了JavaScript正则获取地址栏中 ...

  4. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  5. 分享一个好用的函数吧,将js中的对象转成url参数

    这个函数呢是自己在写基于Vue+ElementUI管理后台时用到的,,下面列出来两种使用方式: 最普通的,封装一个js函数 /*** 对象转url参数* @param {*} data* @param ...

  6. 【JS逆向系列】某乎x96参数与jsvmp初体验

    [JS逆向系列]某乎x96参数与jsvmp初体验 js分析 jsvmp分析 第一种解决方案-补环境 第二种解决方案-修改操作码 第三种解决方案-算法还原 参考文章 样品网址:aHR0cHM6Ly93d ...

  7. common.js 通用方法封装

    /*** 通用方法封装处理** Created by on 2018/9/7*/ (function ($) {var $table = $('#table');$.extend({/*** 表格封装 ...

  8. [原创]使用ajaxFileUpload.js上传文件时附带额外参数。

    最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...

  9. Android和JS之间互相调用方法并传递参数

    场景 Android中使用WebView加载本地html并支持运行JS代码和支持缩放: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

最新文章

  1. Asp.net后台创建HTML
  2. QT 烦人的parent该如何理解
  3. 群晖阿里云域名解析_群晖套件系列六:Web station的安装与使用
  4. 什么是Windows Service应用程序?(转)
  5. python note 15 正则表达式
  6. 操作系统之文件管理:5、文件物理结构(连续分配、链式(显式、隐式)分配、索引分配(链接、多层索引、混合索引))
  7. thunderx 循环获得_湖北专业生产CY310热循环风机厂商
  8. redis数据类型:hashes
  9. 地老天荒只是一个华丽的传说
  10. CSS行内样式内部样式外部样式
  11. leaflet 加载海量点位,点击marker 查看详情功能
  12. 广播电视相关信息系统 安全等级保护基本要求
  13. JAVA之socket编程服务器与客户端通信--实现简易聊天室
  14. webp文件如何进行格式转换
  15. 2014年元旦放假安排,又一个坑爹的假日
  16. 云知识 - OMA-DM 和OTA的关系
  17. Android 日历提供器(二)
  18. ORA-12545 / TNS-12545
  19. 【PLC】Q02HCPU USB驱动安装
  20. 音量增强器和均衡器Boom 3D mac中文版

热门文章

  1. mysql binlog恢复错误_mysql通过binlog日志来恢复数据
  2. 编写一个最简单的.php,学习猿地- 说明 如果我们要编写一个简单的PHP脚本,需要学习哪些...
  3. 数据验证html,JavaScript 表单数据验证
  4. php与nginx通讯方式,[Linux]PHP-FPM与NGINX的两种通讯方式
  5. v-html解析的相对地址img 显示不出来_人工智能专题作品解析——APPInventor安卓应用开发AI图像识别简单应用...
  6. sftp shell 批量上传文件_Shell自动上传下载文件到SFTP服务器
  7. oracle判断非空并拼接,oracle sql 判断字段非空,数据不重复,插入多跳数据
  8. mysql如何下载连接到visual_Visual Studio 2015 Community连接到Mysql
  9. java jdk 8u111_8u111-jdk-alpine在java开发中的NullPointerException错误解决方案
  10. xcode 消除警告