Passing multiple hash like parameters in url

Question

I am building a dynamic website using jQuery and Ajax. I have solved the problem of history and back button using the History Plugin. I want to pass multiple hash like parameters in url without reloading the whole page on click events. I want something like:

• something.php#type=abc&id=123 or
• something.php/?type=abc&id=123...

Which could be the best way to pass and retrieve such kinda paramters in url?

<a href="#type=abc&id=123">Click</a>

if(type==abc && id==123)
{
    do this..
}

Normally we do this, <a href="something.php?type=abc&id=123">Click</a> but it reloads the whole page.

Answer 1

The hash value has a limited set of characters that are technically allowed to be in it. If you look at the URL spec here, the hash value is called a fragmentid. Here's the grammar for what it can contain:

fragmentid              xalphas
xalphas                 xalpha [ xalphas ] 
xalpha                  alpha | digit | safe | extra | escape
safe                    $ | - | _ | @ | . | &  | + | -
extra                   ! | * |  " |  ' | ( | )  | ,
escape                  % hex hex
alpha                   a | b | c | d | e | f | g | h | i | j | k |
                        l | m | n | o | p | q | r | s | t | u | v |
                        w | x | y | z | A | B | C | D | E | F | G |
                        H | I | J | K | L | M | N | O | P | Q | R |
                        S | T | U | V | W | X | Y | Z   
digit                   0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

You will notice that you can have &, but not = unless you call encodeURIComponent and decodeURIComponent on the hash value when setting it or retrieving it.

As for what technique to use, it's really up to you. You can make your own little syntax in the hash value if you need to represent multiple parameters there. I personally would probably separate the values with & just like in the query string, but use - instead of =.

Answer 2

In terms of URIs, you actually can do what you're asking.

@jfriend00 is correct in that you can't use the "=" in the name/value of a given hash value, however, I think they've misread the spec as to what that actually means. You also can't use the "=" character in the name/value in the query string of a URL. Why? Because it has the special meaning in denoting a key/value pair. It serves the same purpose in the hash (aka fragmentid), which is exactly how you're using it in your example.

If you look at the w3.org page for media fragments, the third sentence states:

The syntax is based on the specification of particular name-value pairs that can be used in URI fragment and URI query requests to restrict a media resource to a certain fragment.

Notice it says you can use key/value pairs for both the query and the hash part of a URI. If you look further down in the page, you'll find that it describes the format exactly as you're using it in the fragmentid:

A list of name-value pairs is encoded in the query or fragment component of a URI. The name and value components are separated by an equal sign (=), while multiple name-value pairs are separated by an ampersand (&).

That being said, JavaScript does not have a built-in way to access the key/value pairs in a structured way (just like it doesn't have a built-in way to access the key/value pairs of the query string). So, you'd have to build your own function to do that, and there are a couple other posts on StackOverflow that already show how to do that:

• Parse URL # fragment with javascript
• Parsing URL hash/fragment identifier with JavaScript
• Split and parse window.location.hash