ホームページ > ウェブフロントエンド > jsチュートリアル > js内のオブジェクトをURLパラメータに変換できる関数の紹介(コード例)

js内のオブジェクトをURLパラメータに変換できる関数の紹介(コード例)

不言
リリース: 2018-09-17 15:31:45
オリジナル
4159 人が閲覧しました

この記事では、js 内のオブジェクトを URL パラメーターに変換する関数を紹介します (コード例)。必要な方は参考にしていただければ幸いです。役立ちます。

この関数は、Vue ElementUI に基づいて管理バックグラウンドを作成するときに使用します。使用方法は 2 つあります。

最も一般的な方法は、js をカプセル化することです。 Function

 /**
   * 对象转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 プロトタイプにアタッチすると、

#utils.jsFile
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 File
import Vue from 'vue'
import App from './App.vue'
import utils from '@/utils/utils'

// ...其他代码...

Vue.prototype.$utils = utils

// ...其他代码...
ログイン後にコピー
## 内のいくつかのツール関数を使用するには、各コンポーネントで this.$utils を使用します。 #使用する場合は次のように記述できます

// ....其他代码

this.$utils.urlencode(this.params)

// ...其他代码...
ログイン後にコピー

以上がjs内のオブジェクトをURLパラメータに変換できる関数の紹介(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート