可以把js中的对象转成url参数的函数介绍(代码实例)

本篇文章给大家带来的内容是关于可以把js中的对象转成url参数的函数介绍(代码实例)),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

这个函数呢是自己在写基于Vue+ElementUI管理后台时用到的,,下面列出来两种使用方式:

最普通的,封装一个js函数

 /**   * 对象转url参数   * @param {*} data   * @param {*} isPrefix   */ urlencode (data, isPrefix) {    isPrefix = isPrefix ? isPrefix : false    let prefix = isPrefix ? '?' : ''    let _result = []    for (let key in data) {      let value = data[key]      // 去掉为空的参数      if (['', undefined, null].includes(value)) {        continue      }      if (value.constructor === Array) {        value.forEach(_value => {          _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))        })      } else {        _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))      }    }    return _result.length ? prefix + _result.join('&') : ''  }

登录后复制

在Vue组件化开发时,我是这样写的

写了一个工具文件utils.js,将其作为工具包引入Vue的main.js,并将其附给Vue原型,这样在每个组件中就可以使用this.$utils来使用里面的一些工具函数了

utils.js文件

const utils = {  /**   * 对象转url参数   * @param {*} data   * @param {*} isPrefix   */  urlencode (data, isPrefix = false) {    let prefix = isPrefix ? '?' : ''    let _result = []    for (let key in data) {      let value = data[key]      // 去掉为空的参数      if (['', undefined, null].includes(value)) {        continue      }      if (value.constructor === Array) {        value.forEach(_value => {          _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))        })      } else {        _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))      }    }    return _result.length ? prefix + _result.join('&') : ''  },  // ....其他函数....}export default utils

登录后复制

main.js文件

import Vue from 'vue'import App from './App.vue'import utils from '@/utils/utils'// ...其他代码...Vue.prototype.$utils = utils// ...其他代码...

登录后复制

在使用的时候可以这样写

// ....其他代码this.$utils.urlencode(this.params)// ...其他代码...

登录后复制

以上就是可以把js中的对象转成url参数的函数介绍(代码实例)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2740423.html

(0)
上一篇 2025年3月8日 02:18:24
下一篇 2025年2月19日 21:25:46

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论