Getting Json data using jQuery and .ASMX web services.

If you still have the misfortune to work with asmx services on your project, you may want to know how to easily retrieve json data from an asmx method. The differences between asmx and WCF have been aalyze[d b]efore here and here.

Return a simple string as json response:###

Your asmx page code####

[WebService(Namespace = "http://contoso.com/")] 
[WebServiceBinding(ConformsTo =  WsiProfiles.BasicProfile1_1)]System.Web.Services.WebService
[ScriptService]
public class services :WebService  
{
    [WebMethod(CacheDuration = 60)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetGreeting()
    {
           return "hello world"
    }
}

Your javascript code####

…. code omitted …
var getGreeting = function() {
  var url = http://contoso.com/services.asmx/GetGreeting";
  
  $.ajax({
    type: "POST",
    url: url,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
      alert(data.d)
    },
  	error: function (xmlHttpRequest, textStatus, errorThrown) {
      console.log(xmlHttpRequest.responseText);
      console.log(textStatus);
      console.log(errorThrown);
      }
   })
};

Return an object collection as a json response###

Your asmx page code####

[WebService(Namespace = "http://contoso.com/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]System.Web.Services.WebService
[ScriptService]
public class services :WebService  
{    
    [WebMethod(CacheDuration = 60)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<TestObject> GetObjectCollection()
    {
           return YourService.GetObjectCollection().ToList();
    }
}

Your javascript code####

…. code omitted …
var getObjectCollection = function() {
  var url = http://contoso.com/services.asmx/GetObjectCollection";
  
  $.ajax({
    type: "POST",
    url: url,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
      alert(data.d)
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
      console.log(xmlHttpRequest.responseText);
      console.log(textStatus);
      console.log(errorThrown);
      }
	});
};

If you have a web service method that requires parameters, then you can pass them as part of the post payload as per the example below:

Your asmx page code####

[WebMethod(CacheDuration = 60)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public TestObject GetObjectById(int objectId)
{
	return YourService.GetObjectById(objectId);
}

Your javascript code####

var getObjectCollection = function() {
	var url = http://contoso.com/services.asmx/ GetObjectCollection";
	var payload = { objectId: 3};
	$.ajax({
      type: "POST",
      url: url,
      data: JSON.stringify(payload),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (data) {
      	alert(data.d)
      },
      error: function (xmlHttpRequest, textStatus, errorThrown) {
      	console.log(xmlHttpRequest.responseText);
      	console.log(textStatus);
      	console.log(errorThrown);
      }
	});
};

Happy coding...