jQueryを使ってWebサービスを呼び出す

Question

私はパラメータとしてユーザー名とパスワードを受け取り、JSON（ユーザーはソーシャルワーカー）の子リストを返すWebサービスを作成しました。 WebサービスはIIS7でローカルにホストされます。最終的にはモバイルアプリとして実行する必要があるため、javascript/jqueryを使用してWebサービスにアクセスしようとしています。

私は本当に、Webサービス、またはそのことについてはJavaScriptを経験していないんだけど、以下の2件のリンクが正しい方向に私を指すように見えた：

http://williamsportwebdeveloper.com/cgi/wp/?p=494

http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/

これは、私のHTMLページ：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="TestWebService.aspx.cs" Inherits="Sponsor_A_Child.TestWebService" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="stylesPlaceHolder" runat="server"> 

<script type="text/javascript" src="Scripts/jquery-1.7.1.js"> 
$(document).ready(function() { }); 

function LoginClientClick() { 
    $("#query_results").empty(); 
    $("#query_results").append('<table id="ResultsTable" class="ChildrenTable"><tr><th>Child_ID</th><th>Child_Name</th><th>Child_Surname</th></tr>'); 
    $.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("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td><td>" + c[i][2] + "</td></tr>"); 
      } 
     } 
    }); 
} 

</script> 

</asp:Content> 


<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server"> 

    <div id="LoginDiv"> 
     Email: <input id="EmailBox" type="text" /><br /> 
     Password: <input id="PasswordBox" type="password" /><br /> 

     <input id="LoginButton" type="button" value="Submit" onclick="LoginClientClick()" /> 
    </div> 

    <div id="query_results"> 
    </div> 

</asp:Content> 

これは私のWebサービスコードです：

[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 > 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; 
     } 

私は提供されたリンクの例に従っていますが、私がsubmitを押すと、テーブルヘッダーだけが表示されますが、子のリストは表示されません。 Webサービスをテストしてみると、JSON文字列が返ってきて、その部分が動作しているようです。任意のヘルプは大いに感謝しています:)

編集：スラッシュ197のおかげで私は問題を発見した。エラーが表示されます：

"XMLHttpRequest cannot load http://localhost/PhoneWebServices/GetChildren.asmx?op=GetMyChildren. Origin http://localhost:56018 is not allowed by Access-Control-Allow-Origin." 

Chromeのコンソールでエラーが表示されます。私はこれがURLと関係があると推測していますが、ブラウザでそのURLを試してみるとうまくいきます。

Answer 1

"XMLHttpRequest cannot load http://localhost/PhoneWebServices/GetChildren.asmx?op=GetMyChildren. Origin http://localhost:56018 is not allowed by Access-Control-Allow-Origin." 

で、localhostとlocalhost:56018の問題点は、定義ごとに2個の異なるドメインであり、Ajaxのリクエストは、同じドメインを介して、デフォルトごとにのみ可能です。

両方のサービスを同じポートで実行するか、プロキシを使用してポート56018からデフォルトのローカルホストポート80にコンテンツを配信するのが最適な方法です。書き換えルールまたはあなたのwebservice "クライアント"のほかに、実行している独自のサービス。