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.

Solution 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 =.

Solution 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

Comments

[roy]

yeah making our own syntax can be a solution but it does not look good offcialy. I am using things like this, using history plugin . queness.com/resources/html/ajax/simple.php#page1 Now i need simple.php#page=page1&something=something... PLZ HELP FRIENDS

[jangosteve]

Please see my answer. What @roy is proposing is completely legitimate use of the URL fragmentid and he does not need to replace - with =. In fact, doing so would make it less semantic.

[M H]

This should be a comment, this answer only proves the other answer wrong, it does not actually answer the question.

[jangosteve]

@Hanoncs It can't be a comment, because comments have a limited character limit. Also, it does answer the question, which was: "Which could be the best way to pass and retrieve such kinda paramters in url? <a href="#type=abc&id=123">Click</a>". My answer is literally saying, yes, you can do exactly what you proposed by using the fragment as the link's href, instead of using the query string URL, and thereby not reloading the page as changing the query string in the URL does.