Url Encode javascript object literal

Question

I have Model

public class SomeModel
{
    public string SomeText { get; set; }
}

In javascript I make an javascript object literal of the model:

var model = {
                SomeText: "test"
            };
var serializedData = JSON.stringify(model);

This makes a string which looks like the following:

"{"SomeText":"test"}"

Now suppose I want to send this model to a controller which accepts a model like this with the following function:

public void Index(SomeModel model)
{
}

What I need is an url string in which the model has the following form:

"?SomeText=test"

I know that ajax does exactly this when you send the model via ajax post:

$.ajax({type:"POST", 
        url: "someUrl", 
        data: serializedData,
        ...
});

The 'data:' url-encodes the serialized data.

But I actually do not want to use ajax, so I need to build this url myself. I want to do exactly the same thing as ajax does with 'data:'. How can I url-encode the serialized data myself?

Check out api.jquery.com/jQuery.param

Juan Enrique Muñoz Zolotoochin
– Juan Enrique Muñoz Zolotoochin

2012-06-15 15:50:59 +00:00
Commented Jun 15, 2012 at 15:50 — Juan Enrique Muñoz Zolotoochin
– Juan Enrique Muñoz Zolotoochin, Commented Jun 15, 2012 at 15:50

zzzzBov · Accepted Answer · 2012-06-15 20:09:12Z

34

You should use jQuery.param:

$.param({foo:'bar', fizz:'buzz'});
//produces foo=bar&fizz=buzz

Arrays are ok too:

$.param({foo:['bar', 'baz']});
//produces foo%5B%5D=bar&foo%5B%5D=baz
//which is the url encoded form of: foo[]=bar&foo[]=baz

if you need the traditional array syntax, use the second parameter:

$.param({foo:['bar','baz']}, true);
//produces foo=bar&foo=baz

edited Jun 15, 2012 at 20:09

answered Jun 15, 2012 at 15:51

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

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

1 Comment

JayAr Over a year ago

Exactly what I needed, thank you, but I need to check further because the model contains a list actually...

Michael Lorton · Accepted Answer · 2012-06-15 18:09:21Z

-2

To escape a single value, Javascript has the function escape. You must provide your own function to iterate through the object, add the keys, and so on.

EDIT

Esailija is kind enough to remind me that escape does not handle many common cases properly, and encodeURIComponent is much better. If you're already using jQuery (and you should be), zzzzBov's answer is better still.

edited Jun 15, 2012 at 18:09

answered Jun 15, 2012 at 15:49

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

Collectives™ on Stack Overflow

Url Encode javascript object literal

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related