Constructing a URL with parameters using jQuery

Question

I have for example the following URL stored in a global variable:

var myUrl = "http://mydomain.com/something?row=1";

Then a function has to add let's say another parameter called "column". How would that function add parameters to a pre-existing URL string using jQuery?

Example of the expected generated string:

"http://mydomain.com/something?row=1&column=9"

The problem is that myUrl could also be just:

var myUrl = "http://mydomain.com/something";

(Notice that there are not pre-existing parameters)

There is a component that needs that URL and has it's own way to fetch data using AJAX. — Alfredo Osorio
– Alfredo Osorio, Commented Jan 17, 2012 at 22:10

Jesse Pollak · Accepted Answer · 2012-01-17 22:09:10Z

58

Check out the jQuery function .param(), that should do the trick.

http://api.jquery.com/jQuery.param/

You can then just create a function which appends the string generated by .param() to a url.

answered Jan 17, 2012 at 22:09

Jesse Pollak

1,6001 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ioquatix Over a year ago

What happens if the string already has parameters? Or the string already has parameters with the same name?

johncip Over a year ago

In that case the best thing is probably to parse the URL up front, then rebuild it later with jQuery.param or similar. "The string is a stark data structure..."

epascarello · Accepted Answer · 2012-01-17 22:25:13Z

var myUrl = "http://mydomain.com/something"; function addQSParm(name, value) { var re = new RegExp("([?&]" + name + "=)[^&]+", ""); function add(sep) { myUrl += sep + name + "=" + encodeURIComponent(value); } function change() { myUrl = myUrl.replace(re, "$1" + encodeURIComponent(value)); } if (myUrl.indexOf("?") === -1) { add("?"); } else { if (re.test(myUrl)) { change(); } else { add("&"); } } } console.log(myUrl); addQSParm("foo", "asdf"); console.log(myUrl); addQSParm("bar", "qwerty"); console.log(myUrl); addQSParm("foo", "123"); console.log(myUrl);

jsFiddle

Using the regex ([?&]" + name + "=)([^&]+)? will work better. This enables finding empty parameters within a URL.

Andrew Hare · Accepted Answer · 2012-01-17 22:09:39Z

You don't need jQuery, use a function like this:

var buildUrl = function(base, key, value) { var sep = (base.indexOf('?') > -1) ? '&' : '?'; return base + sep + key + '=' + value; }

You would use it like this:

buildUrl('http://www.example.com/foo', 'test', '123'); buildUrl('http://www.example.com/foo?bar=baz', 'test', '123');

This does not take into account that the parameter could already exist. It would be obvious when you invoke it the way you do in the examples, but it would not be obvious when you add parameters to the URL when all the parameters come from other variables.

Esailija · Accepted Answer · 2012-01-17 22:17:43Z

Keep everything in an object until you actually need a string.

First populate the object from some initial values:

var $_GET = location.search.substr(1).split("&").reduce( function( obj, val ){ if( !val ) return obj; var pair = val.split("="); obj[pair[0]] = pair[1]; return obj; }, {} );

Considering initial url of: "http://mydomain.com/something?row=1&column=9"

$_GET['column'] = 5; $.param( $_GET ); //"row=1&column=5"

Array#reduce

ShankarSangoli · Accepted Answer · 2012-01-17 22:11:33Z

3

You can try this.

myUrl += ((myUrl.indexOf('?') == -1) ? '?' : '&'); myUrl += "column=9";

answered Jan 17, 2012 at 22:11

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

Omar Stewey · Accepted Answer · 2012-01-17 22:14:54Z

-2

if (myUrl.indexOf("?") != -1){ // contains query string } else { // doesn't }

answered Jan 17, 2012 at 22:14

Omar Stewey

2242 silver badges9 bronze badges

2 Comments

Ryan Kohn Over a year ago

This question asks about constructing the query string, not reading it.

Omar Stewey Over a year ago

I don't think you read the question. It's about detecting query string parameters.

Collectives™ on Stack Overflow

Constructing a URL with parameters using jQuery

6 Answers 6

2 Comments

1 Comment

2 Comments

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

2 Comments

Comments

Comments

2 Comments

Linked

Related