在 AngularJS 中使用 Ajax 调用从 ASP.NET Web 服务中检索数据

Question

编辑：添加了一些额外的方法使事情更清楚

我正在尝试使用 AngularJS 中的 Ajax 调用从 C# 中的 ASP.NET Web 服务中检索数据。我们的网络方法如下所示：

[WebMethod]
    public User getUserByEmail(String Email)
    {
        return new User().getUserByEmail(Email);
    }

您将在下面找到我们确切的 .getUserByEmail(Email) 方法：

public User getUserByEmail(String Email)
        {
            User u = null;

            using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["socceronlineConnectionString"].ConnectionString))
            {
                SqlCommand command = new SqlCommand("SELECT * FROM dbo.tbl_User WHERE Email = 'nick.cornelis@student.vives.be'", connection);
                connection.Open();
                SqlDataReader reader = command.ExecuteReader();
                try
                {
                    while(reader.Read())
                    {
                        Debug.WriteLine("UserId: " + reader[0] + " \n ClubId: " + reader[1] + " \n Language: " + reader[4] + " \n Passwordhash: " + reader[11] + " \n FirstName: " + reader[12] + " \n LastName: " + reader[13] + " \n Email: " + reader[14] + " \n");

                        u = saveUser(reader);
                    }
                }
                finally
                {
                    reader.Close();
                }
            }

            return u;
        }

在这里，我们将数据保存在域对象中。

Our domain-class is as follows:

private User saveUser(SqlDataReader reader)
        {
            User u = new User();

            if (reader[0] != DBNull.Value)
            {
                u.UserId = (int)reader[0];
            }
            if (reader[1] != DBNull.Value)
            {
                u.ClubId = (int)reader[1];
            }
            if (reader[4] != DBNull.Value)
            {
                u.Language = (String)reader[4];
            }
            if (reader[11] != DBNull.Value)
            {
                u.Passwordhash = (String)reader[11];
            }
            if (reader[12] != DBNull.Value)
            {
                u.FirstName = (String)reader[12];
            }
            if (reader[13] != DBNull.Value)
            {
                u.LastName = (String)reader[13];
            }
            if (reader[14] != DBNull.Value)
            {
                u.Email = (String)reader[14];
            }

            return u;
        }
    }

如您所见，getUserByEmail 方法连接到数据库并检索正确的信息，该部分工作正常。现在我们正试图通过 AngularJS 访问这个数据库。这是我们的 AJAX 调用：

$http({
   method: 'POST',
   url: "http://localhost:19067/UserList.asmx/getUserByEmail",
   headers: {'Content-Type': 'application/x-www-form-urlencoded'},
   transformRequest: function (obj) {
    var str = [];
    for (var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    return str.join("&");
},
data: {Email: 'test.mail@gmail.com'}
}).success(function (data, status, headers, config) {

    alert("succes");

}).error(function (data, status, headers, config) {

    alert("no succes");

});

当我尝试最后一种方法时，我收到了 500 服务器错误。 当我尝试通过另一种方法通过 GET 接收所有电子邮件地址时，一切正常。 对我的网络服务进行参数化 ajax 调用的正确方法是什么？

Answer 1

试试这个：

$http({
        method: 'POST',
        url: "http://localhost:19067/UserList.asmx/getUserByEmail",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $.param({Email: "test.mail@gmail.com"})
    }).success(function(data,status,headers,config){ });

但有几点需要指出。如果您在使用这段代码（500 错误）后仍然遇到此问题，您可能需要调整您的服务器设置。通过 xhr 访问您的网络服务器时，您必须允许源访问资源。 （跨域资源共享——CORS）

为了在 ASP 中这样做，您需要将以下内容添加到您的配置中

<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

请注意，如果这是一个单一用途的服务，最好指定（源）域而不是这个通配符。 另一件事，如果您想限制对 POST 请求的访问，您可能需要考虑在您的方法中添加以下属性：

    [ScriptMethod(UseHttpGet =false)]

Answer 2

将通过ajax发布的数据改为

JSON.stringify({ "email": "test.mail@gmail.com" });

Answer 3

您的WebMethod 必须是static。它的规则是WebMethod。

[WebMethod]
public static User getUserByEmail(String Email)
{
    return new User().getUserByEmail(Email);
}

如果您想将 JSON 发送到服务器，也可以使用 application/json 作为 content-type，请确保在发送之前进行字符串化。

data: JSON.stringify({Email: 'test.mail@gmail.com'});

如果上述解决方案没有帮助，请提供 inner exception ajax 请求的详细信息。

Answer 4

如果您需要从没有 MVC 的 WebMethod 返回 JSON，请不要返回任何内容并使用 Context.Response.Write(JSON);

[WebMethod]
public void method()
{
   ...
   Context.Response.Write(dt.ToJSON());
}

https://andersnordby.wordpress.com/2012/10/16/returning-json-from-a-net-4-0-web-service/