title: asp.net jquery datatables.net webmethod
body: <p>I am  using ASP.net 3.5. A call to a Webmethod using JQuery returns valid JSON data. However when I call the same webmethod to populate a html table using the datatables.net JQuery plugin, I get back the entire html of the page.</p>
  
  <pre><code>**WebMethod:**
   &lt;WebMethod()&gt; _
           Public Shared Function GetData() As String
          Dim a As String = "{""aaData"": [['Trident','Internet Explorer 4.0']]}"
          Return a
      End Function
  
  
  **Successful JQuery call:**
   $("#Result").click(function() {
      $.ajax({
        type: "POST",
        url: "Default2.aspx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
          // Replace the div's content with the page method's return.
          $("#Result").text(msg.d);
  
        }
      });
    });
  });
  </code></pre>
  
  <p><strong>Unsuccessful JQuery call:</strong><br><br></p>
  
  <pre><code>$(document).ready(function() {
      $('#example').dataTable({
          "bProcessing": true,
          "bServerSide": true,
          "sAjaxSource": "Default2.aspx/GetDate",
          "fnServerData": function(sSource, aoData, fnCallback) {
          $.ajax({
          "dataType": 'json',
          "url": sSource,
          "data": aoData,
          "success": fnCallback
          });
          }
      });
  });
  </code></pre>
  
  <p>Any thoughts on why the second call returns html? I tried adding  contentType: "application/json; charset=utf-8", to the second ajax call. I get an error.</p>