如何從Ajax Post調用跨域WebAPI調用？

-2

我可以撥打WebAPI，但是當我嘗試使用Ajax至POST的方法發佈JSON數據時，我得到的值爲null。我在這裏做錯了什麼？如何從Ajax Post調用跨域WebAPI調用？

我有以下的WebAPI

代碼代碼爲MyData class

public class MyData 
{ 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
}

代碼Ajax呼叫

function PostData() 
{ 
    var _data = JSON.stringify({ value : { FirstName: "ABC", LastName: "XYZ" } }); 
    $.ajax({ 
     url: "http://localhost:57786/api/values", 
     type: "POST", 
     contentType: "application/json", 
     data: _data, 
     success: function (data) { 
      alert("Success"); 
     }, 
     error: function (error) { 
      alert("Error"); 
     } 
    }); 
}

來源

2017-08-11 user3881465

這與跨域調用有什麼關係？ – Marco

因爲相同的代碼適用於相同的域名調用 – user3881465

該信息對您的問題有用 – Marco

該問題的解決方案是Parameter Binding的概念。

我不需要指定我的對象value，因爲WebAPI中最多允許有一個[FromBody]屬性。更多解釋閱讀鏈接

Parameter Binding

Parameter Binding in ASP.NET Web API

WebAPI's POST將接受來自身體只有一個複雜類型的參數。在我的情況下，MyData是一個複雜的類型，WebAPI's POST方法將期望來自正文的複雜類型的屬性。這意味着我只需要通過像這樣的複雜類型的屬性

{ FirstName: "ABC", LastName: "XYZ" }。

function PostData() 
{ 
    var _data = JSON.stringify({ FirstName: "ABC", LastName: "XYZ" }); 
    $.ajax({ 
     url: "http://localhost:57786/api/values", 
     type: "POST", 
     contentType: "application/json", 
     data: _data, 
     success: function (data) { 
      alert("Success"); 
     }, 
     error: function (error) { 
      alert("Error"); 
     } 
    }); 
}

來源

2017-08-12 13:51:06 user3881465

的jQuery.ajax()方法不知道所謂的「ContentType的」財產資本C.轉換爲contentType

總而言之，這應該是這樣的：

//With or without value property 
var _data = JSON.stringify({ FirstName: "ABC", LastName: "XYZ" }); 
$.ajax({ 
    url: "http://localhost:57786/api/values", 
    type: "POST", 
    contentType: "application/json", //lower case 'c'! 
    data: _data, 
    success: function (data) { 
     alert("Success"); 
    }, 
    error: function (error) { 
     alert("Error"); 
    } 
});

如果你想收到一個錯誤，如果你的模型是無效的，你需要在你的控制器可以這樣做：

public HttpResponseMessage Post([FromBody]MyData value) 
{ 
    if(value.FirstName != null && value.LastName != null) 
    { 
     return Request.CreateResponse(HttpStatusCode.OK); 
    } 
    return Request.CreateResponse(HttpStatusCode.BadRequest, "Something went wrong"); 
}

現在如果將無效的json發佈到模型聯編程序中，您將收到錯誤的請求錯誤消息。

來源

2017-08-11 20:46:33 Marco

感謝您的回答。如果需要發佈2個自定義對象呢？ – user3881465

每個請求只能發佈一個對象。所以一個視圖模型是要走的路。基本上是一個包裝2個或更多其他類的類。只是谷歌它。 – Marco

啊我明白了。但是我們可以在MVC控制器動作中發佈'JSON.stringify（{value：{FirstName：「ABC」，LastName：「XYZ」}}）''。所以如果我在WebAPI中需要同樣的功能，那麼我應該在WebAPI中使用MVC控制器嗎？它會起作用嗎？ – user3881465

如何從Ajax Post調用跨域WebAPI調用？

回答

相關問題