jquery.url.js – read request variables

Posted April 18, 2009 * Comments(12)

So what?

Using request parameters in JavaScript

Using request parameters in JavaScript

This jQuery plugin gives the ability to read request parameters of the actual URL and makes them available for further use in your javascript files.

How do I use it?

This plugin works with jQuery 1.2.6+ (it may also work with older versions, but this is untested). So first of all you have to load the jQuery core (duh?) and this plugin as well. This may look something like this: 

1
2

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.url.min.js"></script>

After that you can use the $.url.param() function to get the values of the specific parameters.

For example we’ll take this URL: http://example.com/?name=john&last=doe. Now we would like to know the value of the variable ‘name’ and call $.url.param("name") this returns a string, containing “john”. Inexistent or empty variables like $.url.param("inexistent") return an empty string “”.

Demo and source

As jQuery itself, this plugin released under dual MIT/GPL license. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/*
jQuery Url Plugin
	* Version 1.0
	* 2009-03-22 19:30:05
	* URL: http://ajaxcssblog.com/jquery/url-read-get-variables/
	* Description: jQuery Url Plugin gives the ability to read GET parameters from the actual URL
	* Author: Matthias Jäggli
	* Copyright: Copyright (c) 2009 Matthias Jäggli under dual MIT/GPL license.
*/
(function ($) {
	$.url = {};
	$.extend($.url, {
		_params: {},
		init: function(){
			var paramsRaw = "";
			try{
				paramsRaw = 
					(document.location.href.split("?", 2)[1] || "").split("#")[0].split("&") || [];
				for(var i = 0; i< paramsRaw.length; i++){
					var single = paramsRaw[i].split("=");
					if(single[0])
						this._params[single[0]] = unescape(single[1]);
				}
			}
			catch(e){
				alert(e);
			}
		},
		param: function(name){
			return this._params[name] || "";
		},
		paramAll: function(){
			return this._params;
		}
	});
	$.url.init();
})(jQuery);
Bookmark and Share

12 Comments so far

  1. jquery.fieldtag.js - watermarks for inputfields - Ajax Css Blog on May 7th, 2009

    [...] with earlier versions, but this is untested). Proper loading of a jQuery plugin is explained in my previous post. As soon as the document is ready, just call $(”.selector .of [...]

  2. John E on August 24th, 2009

    This script does exactly what I need, thanks for writing it. I did notice, though, that the script doesn’t handle plus signs (”+”) correctly. Plus signs in the url should be replaced with spaces, while literal plus signs should be encoded as “%2B” already. This can be fixed easily by changing line 22 from:
    [code]
    this._params[single[0]] = unescape(single[1]);
    [/code]
    to:
    [code]
    this._params[single[0]] = unescape(single[1].replace(/\+/g, " "));
    [/code]

  3. Bruno Correia on October 15th, 2009

    You’ve just saved my day. Thanks a lot for the plugin :-)

  4. Jorge Levenfeld on October 23rd, 2009

    It would be great if it could return an array, because maybe you have two or more params with the same name, like in the case of checkboxes.

    (sorry about my english)

  5. mat on October 23rd, 2009

    @Jorge
    That’s for what the paramAll() method is for.
    To retrieve all Params in an array, you simply call
    var allParams = $.url.paramAll();

  6. Jorge Levenfeld on October 26th, 2009

    Ops, sorry

    I didn’t pay enough attention to the code…

    Thank you very much!

  7. Mig on November 12th, 2009

    Excellent, great plugin!! Thanks

  8. Mike on November 18th, 2009

    Hi, this not works for names in form like names[] , etc. i want an array back from form accesible via $_GET['names'] …. ..can be modified ?

  9. goody on November 19th, 2009

    Wow. Thank you so much! Perfect!

  10. Egrendell on December 4th, 2009

    Very cool! and thanks
    E

  11. XIAO Yang on December 17th, 2009

    Thanks for your plugin!

  12. Simon on February 12th, 2010

    Really great plugin!!! Thank you very very much, my day is saved! :D

Leave a Reply