Not geting expected data from jquery ajax call

Question

Here is the c# web method

 [WebMethod]
    public string Hello()
    {
        return "Hello World";
    }

Here is the jquery ajax code

$.ajax({
            url: "http://10.0.2.2/SampleService/Service/HelloWorld.asmx",
            dataType: 'text',
            cache: false,
            crossDomain: true,
            timeout: 15000,
            success: function (rtndata) {
                 alert('Got Success ::'+ rtndata);
            },
            error: function (xhr, errorType, exception) {
                alert("Excep:: "+exception +"Status:: "+xhr.statusText);
        }
        });

But instead of getting Hello World in rtndata i'm getting the full html response page.

score 0 · Answer 1 · answered Jul 10 '13 at 10:55

0

You need to return a json model or disable layout

answered Jul 10 '13 at 10:55

Paul Moldovan

464
2
5
17

Use this: http://stackoverflow.com/questions/4164114/posting-json-data-to-asp-net-mvc Look at how that guy is using a Json model on return. – Paul Moldovan Jul 10 '13 at 10:57

score 0 · Answer 2 · answered Jul 10 '13 at 11:07

If you receive an html page is because you are sending a html page.

You should double check your code to know if anything is append to the response before send the output.

Try to send a JSON formatted response to the ajax call like:

{'hello':'world'}

Then you add dataType as an option of $.ajax. If you want to print the output, you can do alert(JSON.stringify(response)).

$.ajax({
    url: "http://10.0.2.2/SampleService/Service/HelloWorld.asmx",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    crossDomain: true,
    timeout: 15000,
    success: function (rtndata) {
        alert('Got Success ::' + JSON.stringify(rtndata));
    },
    error: function (xhr, errorType, exception) {
        alert("Excep:: " + exception + "Status:: " + xhr.statusText);
    }
});

There are an important thing... More times you add cache: false, but this does not work properly and you should do a trick to solve.

Add the timestamp as a parameter of the call like:

var date = new Date();
$.ajax({
    url: "http://10.0.2.2/SampleService/Service/HelloWorld.asmx?timestamp="+date.now(),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    crossDomain: true,
    timeout: 15000,
    success: function (rtndata) {
        alert('Got Success ::' + JSON.stringify(rtndata));
    },
    error: function (xhr, errorType, exception) {
        alert("Excep:: " + exception + "Status:: " + xhr.statusText);
    }
});

Hope this helps...

Alex Filipovici · Answer 3 · 2013-07-10T11:28:05.790

You have to append the method name to the URL (/HelloWorld, for example) and specify method: "post" in your ajax call (if you want to use a POST request). Try this:

$.ajax({
    url: "http://10.0.2.2/SampleService/Service/HelloWorld.asmx/HelloWorld",
    method:"POST",
    dataType: "text",
    cache: false,
    crossDomain: true,
    timeout: 15000,
    success: function (rtndata) {
        alert('Got Success ::' + rtndata);
    },
    error: function (xhr, errorType, exception) {
        alert("Excep:: " + exception + "Status:: " + xhr.statusText);
    }
});

If you want to use GET as the request method, make sure you have this tags in your web.config file:

<system.web>
  <webServices>
    <protocols>
      <add name="HttpGet" />
      <add name="HttpPost" />
    </protocols>
  </webServices>
</system.web>

Also, you need to decorate the service method with the ScriptMethodAttribute:

[ScriptMethod(UseHttpGet = true)]
[WebMethod]
public string HelloWorld()
{
    return "Hello World";
}

The ajax call (method: "GET" is optional, as it is the default method for text):

$.ajax({
    url: "http://localhost:57315/helloworld.asmx/HelloWorld",
    method: "GET"
    dataType: "text",
    cache: false,
    crossDomain: true,
    timeout: 15000,
    success: function (rtndata) {
        alert('Got Success ::' + rtndata);
    },
    error: function (xhr, errorType, exception) {
        alert("Excep:: " + exception + "Status:: " + xhr.statusText);
    }
});

As you are using cache: false, probably you want to use the GET request:

Setting cache to false will only work correctly with HEAD and GET requests.
It works by appending "_={timestamp}" to the GET parameters.

score 0 · Answer 4 · answered Jul 10 '13 at 11:09

The html page you get is an overview of all the available webmethod in the servicer - an API of sorts. Try navigating to it in a browser.

If you want to call your Hello WebMethod you should add "/Hello" as the method name to the url:

$.ajax({
  type: 'POST',
  contentType: 'application/json; charset=utf-8',
  url: 'http://10.0.2.2/SampleService/Service/HelloWorld.asmx/Hello',
  dataType: 'json',
  cache: false,
  crossDomain: true,
  timeout: 15000,
  success: function (rtndata) {
     alert('Got Success ::'+ rtndata);
  },
  error: function (xhr, errorType, exception) {
     alert("Excep:: "+exception +"Status:: "+xhr.statusText);
  }
});

You can read more here: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Not geting expected data from jquery ajax call

4 Answers4