web-dev-qa-db-ja.com

JavaScriptでクエリパラメータを作成する方法は？

JavaScriptでGETリクエストを行うためにクエリパラメータを作成する方法はありますか？

Pythonのように urllib.urlencode() があります。これは辞書（または2つのタプルのリスト）を取り、'var1=value1&var2=value2'のような文字列を作成します。

javascripturlurlencode
118
cnu

どうぞ：

function encodeQueryData(data) {
   const ret = [];
   for (let d in data)
     ret.Push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
   return ret.join('&');
}

使用法：

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);
182
Shog9

機能的

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}
79
Manav

Zabba は、現在受け入れられている回答に関するコメントの中で、私にとって最良の解決策であるという提案を提供しています： jQuery.param（） を使用します。

元の質問のデータでjQuery.param()を使用すると、コードは次のようになります。

const params = jQuery.param({
    var1: 'value',
    var2: 'value'
});

変数paramsは

"var1=value&var2=value"

より複雑な例、入力および出力については、 jQuery.param（） のドキュメントを参照してください。

33
Kirby

RLSearchParams では、ブラウザーのサポートが増加しています。

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = new URLSearchParams(data);

// searchParams.toString() === 'var1=value1&var2=value2'

Node.jsは querystring モジュールを提供します。

const querystring = require('querystring');

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'
29
Andrew Palmer

これは仕事をするはずです：

const createQueryParams = params => 
      Object.keys(params)
            .map(k => `${k}=${encodeURI(params[k])}`)
            .join('&');

例：

const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)

結果：

name=John&postcode=W1%202DL
9
noego

この問題を完全に解決することを目的としたプロジェクト arg.js をリリースしました。それは伝統的に非常に困難でしたが、今では次のことができます：

var querystring = Arg.url({name: "Mat", state: "CO"});

そして読書は動作します：

var name = Arg("name");

または全体を取得する：

var params = Arg.all();

?query=trueと#hash=trueの違いに関心がある場合は、Arg.query()メソッドとArg.hash()メソッドを使用できます。

9
Mat Ryer

プロトタイプ を使用している場合 Form.serialize があります

jQuery を使用している場合 Ajax/serialize があります

ただし、これを達成するための独立した機能は知りませんが、現在ライブラリを使用していない場合、Google検索でいくつかの有望なオプションが見つかりました。しかし、あなたがそうでないなら、彼らは天国だからです。

7
Paolo Bergantino

このほぼ10年前の質問を再訪したいと思います。この既製プログラミングの時代では、依存関係マネージャー（npm）を使用してプロジェクトをセットアップすることが最善策です。クエリ文字列をエンコードし、すべてのEdgeケースを処理するライブラリーの完全なコテージ業界があります。これは最も人気のあるものの1つです-

https://www.npmjs.com/package/query-string

6
pscl

ES2017（ES8）

Object.entries() を使用して、オブジェクトの[key, value]ペアの配列を返します。たとえば、{a: 1, b: 2}の場合、[['a', 1], ['b', 2]]を返します。 IEだけではサポートされません（サポートされません）。

コード：

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

例：

buildURLQuery({name: 'John', gender: 'male'});

結果：

"name=John&gender=male"
6
Przemek

TypeScriptの小さな変更：

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }
3
Clayton K. N. Passos