Question

I’ve got the following PageMethod in my Default.aspx page:

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

Here I’ve got a div text of which I want to set to whatever is returned via AJAX:

<div id="ajaxDiv"></div>

And below are two ways I invoke AJAX. The first one is the standard AJAX call:

 function testAjax()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function ()
{
    if (xmlhttp.readyState == 4 && status == 200)
        $('#ajaxDiv').text(xmlhttp.responseText);
}
xmlhttp.open("POST", "Default.aspx/Hello", true);
xmlhttp.send();

}

And the second one is with the help of JQuery:

function testAjaxJQuery()
 {
  $.ajax(
  {
     type: "POST",
     url:"Default.aspx/Hello",
     data: "{}",
     success: function (data)
     {
         $('#ajaxDiv').text(data); 
     }
  }
 )

}

I bind a button onclick event to these functions but with both approaches I get the markup of my Default.aspx page, not the word “Hello”. What else do I have to do.

Answer 1

you should use data.d for get response:

 $.ajax({
   type: "POST",
   url: "Default.aspx/Hello",
   data: "{}",
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (data) {
         $("#ajaxDiv").text(data.d);
   }
});