Question

我创建了一个Web服务，它使用用户名和密码作为参数，并返回JSON中的子项列表（用户是社交工作者）。 Web服务使用IIS7在本地托管。我试图使用javascript / jquery访问Web服务，因为它最终需要作为移动应用程序运行。

我对网络服务或javascript没有多少经验，但以下两个链接似乎指向了正确的方向：

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>

这是我的网络服务代码：

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

我按照提供的链接中的示例进行操作，但是当我按下提交时，只显示表格标题但不显示子项列表。当我自己测试Web服务时，它会返回一个JSON字符串，因此该部分似乎正在工作。非常感谢任何帮助:)

编辑：感谢slash197，我发现了这个问题。我收到错误：

"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按定义分为两个不同的域，而Ajax请求默认只能通过同一个域。

最好的方法是，在同一端口上运行这两种服务，或者使用代理，将内容从端口56018传送到默认的localhost端口80.可以通过重写规则或通过自己实现正在运行的服务，除了您的网络服务“客户端”。

使用jQuery调用Web服务

1 个答案: