Verwenden von jQuery zum Aufrufen eines Webdiensts

Question

Ich habe einen Webdienst erstellt, der einen Benutzernamen und ein Kennwort als Parameter verwendet und eine Liste von untergeordneten Elementen in JSON zurückgibt (der Benutzer ist ein Sozialarbeiter). Der Webdienst wird lokal mit IIS7 gehostet. Ich versuche mit javascript/jquery auf den Webservice zuzugreifen, da er eventuell als mobile App ausgeführt werden muss.

Ich bin nicht wirklich mit Web-Services erfahren, oder Javascript für diese Angelegenheit, aber die beiden folgenden Links schien mir in die richtige Richtung zu weisen:

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

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

Dies ist meine hTML-Seite:

<%@ 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> 

Und das ist mein Web-Service-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 > 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; 
     } 

Ich folgte den Beispielen in den bereitgestellten Links, aber wenn ich Submit drücke, werden nur die Tabellenüberschriften angezeigt, aber nicht die Liste der untergeordneten Elemente. Wenn ich den Webdienst jedoch selbst teste, gibt er eine JSON-Zeichenfolge zurück, sodass dieser Teil zu funktionieren scheint. Jede Hilfe wird sehr geschätzt :)

EDIT: Dank slash197 habe ich das Problem entdeckt. Ich erhalte den Fehler:

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

In Chrome-Konsole. Ich vermute, das hat etwas mit der URL zu tun, aber wenn ich diese URL in meinem Browser versuche, funktioniert es gut.

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.