Send JSON to webmethod?

How can 开发者_JAVA技巧i send a JSON object to a webmethod using jQuery?

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",

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.

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

var json = $.toJSON(your_object);

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:

• Using complex types to make calling services less… complex by Dave Ward.

• JavaScript Arrays via JQuery Ajax to an Asp.Net WebMethod by Chris Brandsma.

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.

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.

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

Sample code is here:

var dataString = JSON.stringify({
                            contractName: contractName,
                            contractNumber: contractNumber
                        });

                        $.ajax({
                            type: "POST",
                            url: "CreateQuote.aspx/GetCallHistory",
                            data: dataString,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (result) {
                                alert(result.CallHistoryDescription);
                                    OpenLightBox('divDelete');

                            }
                        });


        [System.Web.Services.WebMethod]
        public static object GetCallHistory(string contractName, string contractNumber)
        {
            return new
            {
                CallHistoryDescription = "Nalan"
            };

        }