Question

jQuery.param()获取一组键值对，并将其转换为可用作HTML请求中的查询字符串的字符串。例如，

a = {
      userid:1,
      gender:male
    }

会转换为

userid=1&gender=male

我正在尝试在Google Apps脚本中调用服务器端的外部API，这需要很长的查询字符串。我会使用jQuery param函数，但似乎没有简单的方法在Google的服务器端使用jQuery。

你能给我一些实现相同功能的简单javascript代码吗？

它的jQuery实现是here，但我不想通过简单地复制它并删除处理'传统'的代码来跳过任何关键细节。

Answer 1

您也可以使用纯JavaScript执行此操作，但您必须编写更多代码行。试试这个：

用于测试的HTML代码：

<p id="test"></p>

要触发的JavaScript onload：

a = {
      userid:1,
      gender: "male",
    }

url = Object.keys(a).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(a[k])
}).join('&')

document.getElementById("test").innerHTML=url

输出是这样的：

userid=1&gender=male

你可以在JSFIDDLE.NET上尝试这个，它可以工作，这里是链接：http://jsfiddle.net/ert93wbp/

Answer 2

ES6 gives us some nice primitives:

    // Function that parses an object of string key/value params to build up
    // a string of url params
    // requires an object with no nested values
    export function parseUrlParams(urlParams) {
        const joinByEquals = (pair) => pair.join('=')
        const params = Object.entries(urlParams).map(joinByEquals).join('&')
        if (params) {
            return `?${params}`
        } else {
        return ''
        }
    }

在此处查看此操作： https://www.webpackbin.com/bins/-KnpOI6hb1AzTDpN3wS7

Answer 3

struct Object
{
    // Added bodies so I see what is being called via a step-into
    Object() {}
    Object(const Object&) {}
    Object(Object&&) noexcept {}
    Object& operator=(const Object&) { return *this; }
    Object& operator=(Object&&) noexcept { return *this; }
};

Object GetObject() { Object o; return o; }

Object obj;

Function(GetObject());  
Function(GetObject());

Answer 4

@Amaynut的答案很棒。但我做了一些简化：

const obj = {
  userid: 1,
  gender: 'male'
}

const params = Object.keys(obj).map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])).join('&')

或者可以使用es6模块进行模块化：

util.js中

export default {
  params (obj) {
    return Object.keys(obj).map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])).join('&')
  }
}

并使用如下：

import util from './util'

const q = {
  userid: 1,
  gender: 'male'
}

const query = util.params(q)

console.log(query)

Answer 5

ES6版本允许转换嵌套对象和数组，就像encodeURI(getUrlString({a: 1, b: [true, 12.3, "string"]}))一样使用。

getUrlString (params, keys = [], isArray = false) {
  const p = Object.keys(params).map(key => {
    let val = params[key]

    if ("[object Object]" === Object.prototype.toString.call(val) || Array.isArray(val)) {
      if (Array.isArray(params)) {
        keys.push("")
      } else {
        keys.push(key)
      }
      return getUrlString(val, keys, Array.isArray(val))
    } else {
      let tKey = key

      if (keys.length > 0) {
        const tKeys = isArray ? keys : [...keys, key]
        tKey = tKeys.reduce((str, k) => { return "" === str ? k : `${str}[${k}]` }, "")
      }
      if (isArray) {
        return `${ tKey }[]=${ val }`
      } else {
        return `${ tKey }=${ val }`
      }

    }
  }).join('&')

  keys.pop()
  return p
}

Answer 6

这有点令人沮丧。这里的所有解决方案似乎都无法真正为任何JSON对象（相当于JQuery）生成实际的“ x-www-form-urlencoded”数据。一些接近，但在子项上失败。我从一些解决方案中拼凑了代码，以获取适用于任何JSON对象的工作版本：

function formData (obj) {
  return Object.keys(obj).map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(JSON.stringify(obj[k]))).join('&')
}

仅供参考，我必须在FastSpring的API中使用它，因为出于某些怪异的原因，他们在2020年仅接受x-www-form-urlencoded数据。整天花在此上，因为这是近十年来API第一次没有这样做不只是接受JSON：（

Answer 7

此处大多数解决方案都无法处理数组/对象值。

这将支持第一级的数组/对象：

const param = obj => Object.entries(obj).map(
    pair => Array.isArray(pair[1]) ?
        pair[1].map(x=>`${encodeURIComponent(pair[0])}[]=${encodeURIComponent(x)}`).join('&') :
        typeof pair[1] === 'object' ? 
        Object.entries(pair[1]).map(x=>`${encodeURIComponent(pair[0])}[${x[0]}]=${encodeURIComponent(x[1])}`).join('&') :
        pair.map(encodeURIComponent).join('=')).join('&')

示例：

param({a:1,b:'b'})
"a=1&b=b"

param({a:1,b:2,c:[1,2],d:{e:'abc',f:4}});
"a=1&b=2&c[]=1&c[]=2&d[e]=abc&d[f]=4"

param({a:1,b:2,c:[1,2,'"'],d:{e:'a"b[c]',f:4}});
"a=1&b=2&c[]=1&c[]=2&c[]=%22&d[e]=a%22b%5Bc%5D&d[f]=4"

但是请注意，它在第二级失败（嵌套）：

param({a:1,b:{c:[1,2]}});
"a=1&b[c]=1%2C2"

普通Javascript等效于jQuery.param（）

7 个答案: