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


128

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

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

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

JSON文字列(シリアル化された配列)をエスケープしてURLのパラメーターとして含めるにはどうすればよいですか?

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

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


回答:


209
encodeURIComponent(JSON.stringify(object_to_be_serialised))

10
それでも、必要以上の文字をエンコードしているようです(Firefoxでリンクを貼り付けると、一部の文字が元に戻ります(つまり{[")。URLを短くできるように、必要な文字だけをエンコードする方法はありますか?
Matthieu Napoli

19

を使用し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
    }
});

19

私も同じことをしたいと思っていました。私にとっての問題は、URLが長くなりすぎることでした。今日、ブルーノジュヒエのjsUrl.jsライブラリを使用して解決策を見つけました。

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

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

明らかに、JSURLは、jsオブジェクトのurlEncodingに最も最適化されたフォーマットを持っています。

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

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


0.1.4以降、必要な場合はIE 6-8とも互換性があります。
Stoffe

8

使用encodeURIComponent()

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

5

変わった代替案を提供します。URLエンコードの詳細をすべて同じ方法で処理しないさまざまなシステムを扱っている場合は特に、異なるエンコードを使用する方が簡単な場合があります。これは最も主流のアプローチではありませんが、特定の状況で役立ちます。

データをURLエンコードする代わりに、base64エンコードできます。これの利点は、エンコードされたデータが非常に一般的であり、アルファベット文字のみで構成され、場合によっては末尾=の文字が含まれることです。例:

JSONの文字列配列:

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

dataパラメータとして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は非常に中立です。


最終的にここに私の友人(&)のアドレス(%26)が見つかりました
Pradeep Kumar Prabaharan 2018年

base64文字列の問題は、スラッシュ(/)文字が含まれている可能性があることです。これにより、URLが無効になります...
ingbabic

それは本当だが、あなたは、base64で使用する文字を選択することができます置き換える/$_またはRFC 3986ごとにURLエンコードを必要としない他の文字
クリス・ジョンソン

0

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

お役に立てれば!


PHPの$ _POSTまたはその他(GET、REQESTなど)に含まれるデータをurldecode()する必要はありません。あなたがここから何をするかにもよりますが、セキュリティ上の問題(SQLインジェクションなど)のために自分自身を開くかもしれない
シジュウカラペトリッチ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.