web-dev-qa-db-ja.com

JSON文字列をエスケープしてURLに含める方法は？

Javascriptを使用して、ページへのリンクを生成します。ページへのパラメーターは、JSONでシリアル化するJavascript配列にあります。

だから私はそのようなURLを生成したいと思います：

http://example.com/?data="MY_JSON_ARRAY_HERE"

RLにパラメーターとして含めるためにJSONストリングをエスケープする（配列をシリアル化する）必要がありますか？

JQueryを使用したソリューションがある場合、私はそれが大好きです。

注：はい。ページのパラメーターは多数あるため、配列に含める必要があります。後でリンクを短くするためにbit.lyを使用すると思います。

javascriptjqueryjsonurlescaping
118
Matthieu Napoli
encodeURIComponent(JSON.stringify(object_to_be_serialised))
199
Delan Azabani

私も同じことをしようとしていました。私の問題は、私のURLが長すぎたためです。今日 Bruno JouhierのjsUrl.jsライブラリ を使用して解決策を見つけました。

まだ十分にテストしていません。ただし、3つの異なる方法を使用して同じラージオブジェクトをエンコードした後の文字列出力の文字長を示す例を次に示します。

  • jQuery.paramを使用した2651文字
  • JSON.stringify + encodeURIComponentを使用した1691文字
  • JSURL.stringifyを使用した821文字

jSURLには、jsオブジェクトをurlEncodingするための最も最適化された形式があります。

https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q のスレッドは、エンコードと解析のベンチマークを示しています。

注：テスト後、jsurl.jsライブラリはObject.keys、Array.map、Array.filterなどのECMAScript 5関数を使用しているようです。したがって、最新のブラウザー（つまり8以下）でのみ動作します。ただし、これらの関数のポリフィルは、より多くのブラウザーとの互換性を確保します。

18
jcj80

encodeURIComponent を使用して、クエリ文字列の一部を安全にURLエンコードできます。

var array = JSON.stringify([ 'foo', 'bar' ]);
var url = 'http://example.com/?data=' + encodeURIComponent(array);

または、これをAJAXリクエストとして送信する場合：

var array = JSON.stringify([ 'foo', 'bar' ]);
$.ajax({
    url: 'http://example.com/',
    type: 'GET',
    data: { data: array },
    success: function(result) {
        // process the results
    }
});
18
Darin Dimitrov

encodeURIComponent()の使用：

var url = 'index.php?data='+encodeURIComponent(JSON.stringify({"json":[{"j":"son"}]})),
8
genesis

奇妙な代替手段を提供します。異なるエンコーディングを使用する方が簡単な場合があります。特に、URLエンコーディングの詳細をすべて同じ方法で処理しないさまざまなシステムを扱う場合はなおさらです。これは最も主流のアプローチではありませんが、特定の状況で役立つ場合があります。

データをURLエンコードするのではなく、base64エンコードできます。これの利点は、エンコードされたデータが非常に汎用的であり、アルファ文字のみで構成され、末尾に=が含まれることがあることです。例：

JSONの文字列配列：

["option", "Fred's dog", "Bill & Trudy", "param=3"]

data paramとしてURLエンコードされたそのデータ：

"data=%5B%27option%27%2C+%22Fred%27s+dog%22%2C+%27Bill+%26+Trudy%27%2C+%27param%3D3%27%5D"

同じ、base64エンコード：

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

Base64のアプローチは少し短くすることができますが、さらに重要なことは、よりシンプルです。通常、引用符、埋め込まれた%記号などが原因で、cURL、Webブラウザー、および他のクライアント間でURLエンコードされたデータを移動する際に問題が発生することがよくあります。 Base64は特殊文字を使用しないため、非常に中立的です。

4
Chris Johnson

Delanの回答は完璧です。追加するだけです-誰かがパラメーターに名前を付けたり、複数のJSON文字列を個別に渡したい場合に備えて、以下のコードが役立ちます！

JQuery

var valuesToPass = new Array(encodeURIComponent(VALUE_1), encodeURIComponent(VALUE_2), encodeURIComponent(VALUE_3), encodeURIComponent(VALUE_4));

data = {elements:JSON.stringify(valuesToPass)}

PHP

json_decode(urldecode($_POST('elements')));

お役に立てれば！

0
foxybagga