Passing complex data over URL with grace

Question

I'm thinking about using something like:

<script src="http://www.example.com/?key={"param":"value"}"&gt;

As you can see in the example above a JSON formatted string is being passed over the src URL. The example, of course, doesn't work because both the JSON string and the script tag use double quotes.

Here are a few solutions that I can think of:

1. Use single quotes in the script tag. The problem - doesn't look good in a page where all other tags use double quotes.

2. Use " instead of ". The problem - makes the src URL hard to read.

3. Use an alternative to JSON data interchange format that doesn't use double quotes. The problem - I can't think of a good candidate.

What do you think?

Answer 1

In similar solutions, single quotes is fine, so I'd recommend that.

The good thing about this solution is that it distinguishes the vars from the HTML attributes with double quotes.

Answer 2

You should use encodeUriComponent and then decode the value on the server (what language are you using on the server?).

Answer 3

How complex does the data need to be? If it's just key-value pairs, then why not use ordinary form URL encoding?

<script src="http://www.example.com/?param=value&amp;otherparam=othervalue"&gt;

Answer 4

Look at the way the URLs are structured for Google Charts - they give some pretty good tips.

Answer 5

Another option would be to urlencode just the JSON part. I'm not sure how you're constructing these URLs, but if it's by hand just take:

{"param":"value",{[{"param":"value","param":"value"},{"param":"value","param":"value"}]}}

And in Firebug call "escape" on that string, which gives you:

%7B%22param%22%3A%22value%22%2C%7B%5B%7B%22param%22%3A%22value%22%2C%22param%22%3A%22value%22%7D%2C%7B%22param%22%3A%22value%22%2C%22param%22%3A%22value%22%7D%5D%7D%7D

So you'd have a script URL such as:

<script src="http://www.example.com/?key=%7B%22param%22%3A%22...

Those percent hex codes get turned back into actual bytes by your web server, so you can just go ahead and JSON-parse the "key" GET parameter and have a nice hash/array nested structure.