使用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通過另一種方法接收所有電子郵件地址時，一切正常。 什么是對我的Web服務進行參數化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訪問Web服務器時，必須允許源訪問資源。 （跨域資源共享-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'});

如果上述解決方案沒有幫助，請提供ajax請求的inner exception詳細信息。

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/