Bagaimana cara melarikan diri dari string JSON untuk memilikinya di URL?

129

Menggunakan Javascript, saya ingin membuat link ke halaman. Parameter halaman ada dalam array Javascript yang saya buat berseri di JSON.

Jadi saya ingin membuat URL seperti itu:

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

Bagaimana saya harus keluar dari string JSON saya (array berseri) untuk memasukkannya sebagai parameter di URL?

Jika ada solusi menggunakan JQuery, saya akan menyukainya.

Catatan: Ya, parameter halaman harus dalam array karena jumlahnya banyak. Saya pikir saya akan menggunakan bit.ly untuk mempersingkat tautan sesudahnya.

Matthieu Napoli
sumber

Jawaban:

210
encodeURIComponent(JSON.stringify(object_to_be_serialised))
Delan Azabani
sumber
10
Tampaknya itu mengkodekan lebih banyak karakter daripada yang diperlukan (ketika saya menempelkan tautan di Firefox, beberapa karakter dikembalikan (yaitu {["). Apakah ada cara untuk menyandikan hanya karakter yang diperlukan, sehingga saya dapat mempersingkat url saya?
Matthieu Napoli
19

Anda dapat menggunakan encodeURIComponentuntuk dengan aman menyandikan bagian-bagian dari string kueri:

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

atau jika Anda mengirimkan ini sebagai permintaan AJAX:

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

Saya ingin melakukan hal yang sama. masalah bagi saya adalah url saya terlalu panjang. Saya menemukan solusi hari ini menggunakan pustaka jsUrl.js Bruno Jouhier .

Saya belum mengujinya dengan sangat teliti. Namun, berikut adalah contoh yang menunjukkan panjang karakter output string setelah mengenkode objek besar yang sama menggunakan 3 metode berbeda:

  • 2651 karakter menggunakan jQuery.param
  • 1691 karakter menggunakan JSON.stringify + encodeURIComponent
  • 821 karakter menggunakan JSURL.stringify

jelas JSURL memiliki format yang paling optimal untuk urlEncoding objek js.

utas di https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q menunjukkan tolok ukur untuk encoding dan parsing.

Catatan : Setelah pengujian, sepertinya pustaka jsurl.js menggunakan fungsi ECMAScript 5 seperti Object.keys, Array.map, dan Array.filter. Oleh karena itu, ini hanya akan berfungsi di browser modern (no mis. 8 ke bawah). Namun, apakah polyfill untuk fungsi-fungsi ini yang akan membuatnya kompatibel dengan lebih banyak browser.

jcj80.dll
sumber
Sejak 0.1.4 itu juga kompatibel dengan IE 6-8 jika Anda masih membutuhkannya.
Stoffe
8

Menggunakan encodeURIComponent():

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

Saya akan menawarkan alternatif yang aneh. Terkadang lebih mudah untuk menggunakan pengkodean yang berbeda, terutama jika Anda berurusan dengan berbagai sistem yang tidak semuanya menangani detail pengkodean URL dengan cara yang sama. Ini bukan pendekatan yang paling umum, tetapi dapat berguna dalam situasi tertentu.

Daripada menyandikan data dengan URL, Anda dapat menyandikannya dengan base64. Manfaat dari ini adalah data yang dikodekan sangat umum, hanya terdiri dari karakter alfa dan terkadang jejak =. Contoh:

Larik string JSON:

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

Data itu, dienkode URL sebagai dataparam:

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

Sama, berenkode base64:

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

Pendekatan base64 bisa sedikit lebih pendek, tetapi yang lebih penting, ini lebih sederhana. Saya sering mengalami masalah saat memindahkan data yang dikodekan URL antara cURL, browser web, dan klien lain, biasanya karena tanda kutip, %tanda yang disematkan, dan sebagainya. Base64 sangat netral karena tidak menggunakan karakter khusus.

Chris Johnson
sumber
akhirnya menemukan alamat (% 26) teman saya (&) di sini
Pradeep Kumar Prabaharan
Masalah dengan string base64 adalah string tersebut dapat berisi karakter garis miring (/), yang akan membuat url ...
ingbabic
Itu benar, tetapi Anda dapat memilih karakter untuk digunakan dalam base64: ganti /dengan $, _atau karakter lain yang tidak memerlukan pengkodean url per RFC 3986.
Chris Johnson
0

Jawaban yang diberikan oleh Delan sempurna. Hanya menambahkannya - jika seseorang ingin memberi nama parameter atau meneruskan beberapa string JSON secara terpisah - kode di bawah ini dapat membantu!

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

Semoga ini membantu!

foxybagga.dll
sumber
Tidak perlu urldecode () data yang datang dalam PHP $ _POST atau lainnya (GET, REQEST, dll.). Bergantung pada apa yang Anda lakukan mulai saat ini, Anda mungkin membuka diri untuk masalah keamanan (injeksi SQL, dll.)
Tit Petric