Plain Javascript-Äquivalent zu jQuery.param()

jQuery.param() nimmt ein array von Schlüssel-Wert-Paare, und wandelt es in eine Zeichenfolge, die Sie verwenden können, wie ein query-string in HTML-Anfragen. Zum Beispiel, 

a = {
      userid:1,
      gender:male
    }

bekommen würde umgewandelt 

userid=1&gender=male

Ich versuche, den Aufruf von externen APIs auf server-Seite in einer Google Apps-Skript, die langen query-strings. Ich benutze das jQuery param-Funktion, aber es scheint keine einfache Möglichkeit zur Verwendung von jQuery auf der server-Seite in Google.

Könnten Sie mir einfachen javascript-code, erreicht die gleiche Funktionalität?

Die jQuery-Implementierung hier, aber ich möchte nicht das Risiko eingehen das überspringen über alle wichtigen details durch einfaches kopieren und kopieren Sie sich den code der Umgang mit "herkömmlichen".

InformationsquelleAutor Neil | 2014-08-10
  1. 26

    Können Sie auch mit reinem JavaScript, aber Sie haben zu schreiben mehr code-Zeilen. Versuchen Sie dies:

    HTML-code zum testen:

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

    JavaScript ausgelöst werden, 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

    Die Ausgabe ist: 

    userid=1&gender=male

    Können Sie versuchen, diese auf JSFIDDLE.NET es funktioniert, hier der link: http://jsfiddle.net/ert93wbp/

    • Dank Amynut. Das ist, was ich dachte, es wäre, aber wollte sichergehen, dass ich nicht verpassen allen Feinheiten und tun es in den meisten JSic (Javascript, was Pythonic ist Python) Weg. Eine Besonderheit in der jquery-Umsetzung ist "return s.join("&").ersetzen(r20, "+");". Sie müssen nicht wirklich brauchen, dass der Ersatz mit dem + Zeichen? MDN lässt vermuten, dass dieses ist relevant, wenn eine Buchung anstatt Immer. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
    • wie wäre es mit verschachtelten Schlüssel ? Sie müssen Rekursion oder verflachen Sie das Objekt.
    InformationsquelleAutor Amaynut
  2. 1
    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 ''
        }
    }

    Ihn in Aktion zu sehen hier:
    https://www.webpackbin.com/bins/-KnpOI6hb1AzTDpN3wS7

    InformationsquelleAutor jmares93
  3. 1
    export function param( params ) {
    const p = new URLSearchParams;
    for( const [ key, value ] of Object.entries( params ) ) {
        p.set( key, String( value ) );
    }
    return p.toString();
}
    • Bitte fügen Sie eine Erklärung, wie der code oben hilft.
    InformationsquelleAutor error
  4. 1

    ES6-version erlaubt das umwandeln von verschachtelten Objekten und arrays verwenden Sie einfach wie 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
}
    InformationsquelleAutor Boris Barroso
  5. 0

    @Amaynut Antwort ist genial. Aber ich Tue etwas vereinfachen:

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

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

    oder vielleicht modulize es mit es6-Modul:

    util.js

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

    und verwenden, wie diese:

    import util from './util'

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

const query = util.params(q)

console.log(query)
    • Oder Object.entries(obj).map(pair => pair.map(encodeURIComponent).join('=')).join('&')
    • genial @Albin, aber achten Sie auf die Kompatibilität dieser es das neue feature, viel Glück:-D
    • Sicher!!! Verwenden polyfills für die Kompatibilität. Polyfill.io zum Beispiel das übernimmt.
    • Danke für die Veränderung. Ich finde @amaynut der code leichter zu Lesen. IMO ein one-liner nicht immer auf Vereinfachung.
    InformationsquelleAutor csdxf
Schreibe einen Kommentar