Javascriptでクエリパラメータを作成するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/111529

  •  02-07-2019
  •  | 
  •  

質問

を作成する方法はありますか? クエリパラメータ をするために 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);

他のヒント

機能的な

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

ザバ 現在受け入れられている回答に対するコメントで、私にとって最良の解決策であるという提案を提供してくれました。使用 jQuery.param().

私が使うなら jQuery.param() 元の質問のデータの場合、コードは次のようになります。

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

変数 params になるだろう

"var1=value&var2=value"

より複雑な例、入力と出力については、 jQuery.param() ドキュメンテーション。

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

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

const searchParams = new URLSearchParams(data);

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

Node.js が提供するのは、 クエリ文字列 モジュール。

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'

リリースしたばかりです 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

使用している場合 プロトタイプ がある フォーム.シリアル化

使用している場合 jQuery がある Ajax/シリアライズ

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

このほぼ 10 年前の質問をもう一度考えてみたいと思います。既製プログラミングのこの時代では、依存関係マネージャーを使用してプロジェクトをセットアップするのが最善の策です (npm）。世の中には、クエリ文字列をエンコードし、あらゆるエッジケースに対処するライブラリの家内産業が存在します。これは最も人気のあるものの 1 つです -

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

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"

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;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top