views:

963

answers:

6

How can i send a JSON object to a webmethod using jQuery?

+9  A: 

Please refer to this article by Dave Ward. It is a complete tutorial on doing this stuff. Also you will find there other great jquery/ASP.net stuff.

EDIT:- Dave is calling method without any arguments, you can replace empty data property with actual data you want to send:

$.ajax({
  type: "POST",
  url: "Default.aspx/GetDate",
  data: "{'name':'tiger1','hobbies':['reading','music']}",//PUT DATA HERE
  contentType: "application/json; charset=utf-8",
  dataType: "json",
TheVillageIdiot
+1 - I think this topic and that particular article will keep coming up for some time :)
Russ Cam
Yes @Russ Dave has shown light to don't know how many developers.
TheVillageIdiot
Are you sure that hobbies array gets passed as you expect it to?
Josh Stodola
@Josh going by examples on this page [http://www.json.org/example.html] it will. Actually it is only for illustration, if you feel it is wrong please edit the answer or put right thing in comment and I'll edit answer.
TheVillageIdiot
A: 

You'd need to post it using Ajax and accept the incoming string on the webmethod. Then you'd need to use the JavaScript deserializer to convert it into an object on the server side.

lomaxx
I think he's asking how to turn the JavaScript object into a JSON string to send along to said webmethod.
ceejayoz
+6  A: 

WebMethods expect a string containing JSON that will be parsed on the server-side, I use the JSON.stringify function to convert a parameters object to string, and send the data, I have a function like this:

jQuery.executePageMethod = function(location, methodName, methodArguments,
                                    onSuccess, onFail) {
    this.ajax({
        type: "POST",
        url: location + "/" + methodName,
        data: JSON.stringify(methodArguments), // convert the arguments to string
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data, status) {
            var jsonData = JSON.parse(data.d);
            onSuccess(jsonData, status);
        },
        fail: onFail
    });
};

I recommend you to include the json2.js parser in your pages, to have the JSON.stringify function cross-browser available.

CMS
+1 - good wrapper
Russ Cam
+2  A: 

The most convenient solutions I've seen simplify this by using the open-source JSON2.js library to parse and 'stringify' complex object data.

These two excellent articles go into detail:

The second article might be especially relevant for you, though it calls a web service method with the following signature ...

public void SendValues(List<string> list)

... it demonstrates how to use the JSON2.js library to render a List<string> in javascript (using jQuery, this example is taken directly from the second article):

var list = ["a", "b", "c", "d"];
var jsonText = JSON.stringify({ list: list });

// The 'list' is posted like this

$.ajax({
    type: "POST",
    url: "WebService1.asmx/SendValues",
    data: jsonText,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function() { alert("it worked"); },
    failure: function() { alert("Uh oh"); }
});

Just use your webmethod URL in lieu of the web service's.

Jeff Sternal
+6  A: 

Another library you can use is the jquery-json library. Once included:

var json = $.toJSON(your_object);
ceejayoz
Ooh, thanks for this. The minified version is ~2k, and it integrates well with jQuery (obviously), which is nice if you're already using it (which I am).
Xiong Chiamiov
A: 

JSON.stringify does help, but:

  1. it's not cross-browser take a look here: http://www.sitepoint.com/blogs/2009/08/19/javascript-json-serialization/#

  2. For browser in-built functions - every browser will have its problems. If You use the above serialization You will need to:

    • remove newlines with regexp in strings
    • take care about " in strings
naugtur