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

作成するにはどのような方法があり、クエリパラメータ行うためのGETリクエスト JavaScriptでは？

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

どうぞ：

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);

URLSearchParamsのブラウザサポートが増加しています。

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'

機能的

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

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

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

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

変数paramsは

"var1=value&var2=value"

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

この問題を一度に解決することを目的としたプロジェクトである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()方法を。

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

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

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"

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

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

私はこれを達成するための独立した関数を知りませんが、それをグーグル検索すると、現在ライブラリを使用していない場合にいくつかの有望なオプションが見つかりました。もしそうでなければ、彼らは天国なので、本当にそうすべきです。

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

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

typescriptを少し変更します。

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

このスレッドは、phpでURLをエスケープするためのコードを指します。ありますescape()し、unescape()ほとんどの作業を行いますされていますが、カップルの余分なものを追加する必要があります。

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}