Passing multiple hash parameters in a url

Question

I am building a dynamic website using jQuery and Ajax. I solved the problem with the story and the back button using the "history plugin". I want to pass a few hash parameters to url without reloading the whole page on click events. I need something like:

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

What could be the best way to pass and receive such parameters in a url?

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

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

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

Answer 1

A hash value has a limited set of characters that are technically permitted for it. If you look at the spec URL here, the hash value is called fragmented. Here is a grammar for what it may 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 = , if you do not call encodeURIComponent and decodeURIComponent with a hash value when setting or retrieving it.

As for which method to use, it really is up to you. You can make your own little syntax in a hash value if you need to provide several parameters there. I personally would probably separate the values ​​with & exact same way as in the query string, but instead of = use - .

Answer 2

In terms of URIs, you really can do what you ask.

@ jfriend00 is true that you cannot use "=" in the name / value of a given hash value, however I think they misunderstood the specification as to what this actually means. You also cannot use the "=" character in the name / value in the query string of a URL. What for? Because it is of particular importance for designating a key / value pair. It serves the same purpose in a hash (aka fragmented), which is exactly what you use in your example.

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

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

Please note that you can use key / value pairs for both the request and the hash of the URI. If you look further on the page , you will find that it describes the format exactly as you use it in the fragmenter:

The list of name-value pairs is encoded in the request component or fragment of the URI. Name and value components are separated by an equal sign (=), and several name-value pairs are separated by an ampersand (&).

However, JavaScript does not have a built-in way to access key / value pairs in a structured way (just as it does not have a built-in way to access key / value pairs of a query string). So, you will need to create your own function to do this, and there are a few more posts in StackOverflow that already show how to do this:

• url fragment url with javascript
• JavaScript hash / fragment id
• Split and parse window.location.hash