title: Using jQuery to call a web service
body: <p>I have created a web service which takes a username and password as parameters and returns a list of children in JSON (the user is a Social Worker). The web service is hosted locally with IIS7. I am attempting to access the web service using javascript/jquery because it will eventually need to run as a mobile app.</p>
  
  <p>I'm not really experienced with web services, or javascript for that matter, but the following two links seemed to point me in the right direction:</p>
  
  <p><a href="http://williamsportwebdeveloper.com/cgi/wp/?p=494" rel="nofollow">http://williamsportwebdeveloper.com/cgi/wp/?p=494</a></p>
  
  <p><a href="http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/" rel="nofollow">http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/</a></p>
  
  <p>This is my html page:</p>
  
  <pre><code>   &lt;%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="TestWebService.aspx.cs" Inherits="Sponsor_A_Child.TestWebService" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="stylesPlaceHolder" runat="server"&gt;
  
  &lt;script type="text/javascript" src="Scripts/jquery-1.7.1.js"&gt;
  $(document).ready(function () { });
  
  function LoginClientClick() {
      $("#query_results").empty();
      $("#query_results").append('&lt;table id="ResultsTable" class="ChildrenTable"&gt;&lt;tr&gt;&lt;th&gt;Child_ID&lt;/th&gt;&lt;th&gt;Child_Name&lt;/th&gt;&lt;th&gt;Child_Surname&lt;/th&gt;&lt;/tr&gt;');
      $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "http://localhost/PhoneWebServices/GetChildren.asmx?op=GetMyChildren",
          data: '{ "email" : "' + $("#EmailBox").val() + '", "password": "' + $("#PasswordBox").val() + '" }',
          dataType: "json",
          success: function (msg) {
              var c = eval(msg.d);
              alert("" + c);
              for (var i in c) {
                  $("#ResultsTable tr:last").after("&lt;tr&gt;&lt;td&gt;" + c[i][0] + "&lt;/td&gt;&lt;td&gt;" + c[i][1] + "&lt;/td&gt;&lt;td&gt;" + c[i][2] + "&lt;/td&gt;&lt;/tr&gt;");
              }
          }
      });
  }
  
  &lt;/script&gt;
  
  &lt;/asp:Content&gt;
  
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server"&gt;
  
      &lt;div id="LoginDiv"&gt;
          Email: &lt;input id="EmailBox" type="text" /&gt;&lt;br /&gt;
          Password: &lt;input id="PasswordBox" type="password" /&gt;&lt;br /&gt;
  
          &lt;input id="LoginButton" type="button" value="Submit" onclick="LoginClientClick()" /&gt;
      &lt;/div&gt;
  
      &lt;div id="query_results"&gt;
      &lt;/div&gt;
  
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>And this is my web service code:</p>
  
  <pre><code>[WebMethod (Description="Returns the list of children for whom the social worker is responsible.")]
          public String GetMyChildren(String email,String password)
          {
              DataSet MyChildren=new DataSet();
  
              int ID=SocialWorkerLogin(email, password);
              if (ID &gt; 0)
              {
                  MyChildren = FillChildrenTable(ID);
              }
              MyChildren.DataSetName = "My Children"; //To prevent 'DataTable name not set' error
  
              string[][] JaggedArray = new string[MyChildren.Tables[0].Rows.Count][];
             int i = 0;
             foreach (DataRow rs in MyChildren.Tables[0].Rows)
             {
                 JaggedArray[i] = new string[] { rs["Child_ID"].ToString(), rs["Child_Name"].ToString(), rs["Child_Surname"].ToString() };
                 i = i + 1;
             }
  
             // Return JSON data
             JavaScriptSerializer js = new JavaScriptSerializer();
             string strJSON = js.Serialize(JaggedArray);
             return strJSON;
          }
  </code></pre>
  
  <p>I followed the examples in the provided links, but when I press submit, only the table headers appear but not the list of children. When I test the web service on it's own though, it does return a JSON string so that part seems to be working. Any help is greatly appreciated :) </p>
  
  <p>EDIT: Thanks to slash197 I discovered the problem. I get the error:</p>
  
  <pre><code>"XMLHttpRequest cannot load http://localhost/PhoneWebServices/GetChildren.asmx?op=GetMyChildren. Origin http://localhost:56018 is not allowed by Access-Control-Allow-Origin."
  </code></pre>
  
  <p>In Chrome's console. I'm guessing this has something to do with the URL, but when I try that URL in my browser it works fine.</p>