How to use jQuery to call an asp.net web service?

Question

I'm trying to use jQuery to get data from an ASP.NET web service (SharePoint Server 2007 lists.asmx) but any call to a web service will really help as a first step in that direction.

Answer 1

Here is an example to call your webservice using jQuery.get:

$.get("http://doman.com/webservice.asmx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

In the later example, you call "webservice.asmx", giving it 2 parameters: name and time. Then, a function is called in callback.

Answer 2

The problem with @mnour source is that jQuery is not going to be able to deserialize the WSDL file returned. You need to make sure it is deserialized in JSON or XML.

Answer 3

I don't know about that specific SharePoint web service, but you can decorate a page method or a web service with <WebMethod()> (in vb.net) to ensure that it serializes to JSON. You can probably just wrap the method that webservice.asmx uses internally, in your own web service.

Dave Ward has a nice walkthrough on this.

Answer 4

I quite often use ajaxpro along with jquary. ajaxpro lets me call .net functions from JS and I use jquary for the rest.

Answer 5

I have a decent example here on using the JQuery AJAX call with asmx web services... http://blog.sonerdy.com/2008/10/jquery-ajax-and-asmx.html

There is a line of code to uncommment in order to have it return JSON.

Answer 6

I use this method as a wrapper so that I can send parameters. Also using the variables in the top of the method allows it to be minimized at a higher ratio and allows for some code reuse if making multiple similar calls.

function InfoByDate(sDate, eDate){
var divToBeWorkedOn = '#AjaxPlaceHolder';
var webMethod = 'http://MyWebService/Web.asmx/GetInfoByDates'
var parameters = "{'sDate':'" + sDate + "','eDate':'" + eDate + "'}"

$.ajax({
 type: "POST",
 url: webMethod,
 data: parameters,
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(msg) {    
  $(divToBeWorkedOn).html(msg.d);
 },
 error: function(e){
  $(divToBeWorkedOn).html("Unavailable");     
 }
});

}

Hope that helps.

please note that this requires the 3.5 framework to expose JSON webmethods that can be consumed in this manner

Answer 7

Hi am using Webservice as a different project and when i add a webreference of this in my project. then jquery call does not works. if the asmx file is in the same webapplication project then it works fine. Is there any way to cosume the webservice's webmethod by puting the web reference of weservice.

Answer 8

Just want to say thank you for this code snippet - just about got it working :)

Answer 9

Can anyone tell me how to get a web service response which doesn't come with the warning 'This page is accessing information which is not under its control ....'

Thanks