Http post Angular2

Question

我正在將Ionic v1應用程序遷移到Ionic v2。在我的一個方法中，我調用了一個WCF服務。在AngularJS我不喜歡這樣寫道：

$http({ 
method: 'POST', 
url: url, 
data: JSON.stringify({ dato: 11 }), 
dataType: "json", 
contentType: "application/x-www-form-urlencoded" 
}) 

而且在Angular2這樣的：

let data = JSON.stringify({ dato: 11 }); 
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'}); 
let options = new RequestOptions({ headers: headers }); 
this.http.post(url, data, options) 
.subscribe(data => { 
    console.log(data); 
}, error => { 
    console.log("Error"); 
}); 

不過，我從C＃的服務收到一個錯誤，說我發送給我的函數格式是' RAW'，等待它發送JSON和Angular 2

AngularJS發生了這個錯誤，但它是通過添加我之前留在這篇文章中的代碼解決的。

編輯

我的WCF服務：

[OperationContract] 
[WebInvoke(UriTemplate = "/GetCaptaciones", Method = "POST", ResponseFormat = WebMessageFormat.Json, RequestFormat=WebMessageFormat.Json , BodyStyle = WebMessageBodyStyle.Wrapped)] 
List<Captacion> GetCaptaciones(int id_captador); 

和

let data = JSON.stringify({ id_captador: 11 }); 
let headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({ headers: headers }); 
this.http.post(url + "/GetCaptaciones", data, options).subscribe(data => { 
    console.log(data); 
}); 

不工作，

但是，如果我從郵差測試這個工作

Answer 1

此：

let data = JSON.stringify({ dato: 11 }); 

這：

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'}); 

是非常矛盾和不一致。

當您向Web服務器發出HTTP請求時，請務必保持一致，以便對請求進行編碼。所以如果打算送一個JSON體確保您指定適當的Content-Type請求頭，這樣服務器就知道如何處理這個有效載荷：

let headers = new Headers({ 'Content-Type': 'application/json'}); 

Answer 2

除了什麼達林說，我會說你是不正確使用BodyStyle = WebMessageBodyStyle.Wrapped。

看到你的wcf方法需要一個單一的參數，所以你可以繼續前進而不包含wrappedrequest屬性。

[OperationContract] 
[WebInvoke(UriTemplate = "/GetCaptaciones", Method = "POST", ResponseFormat = WebMessageFormat.Json, RequestFormat=WebMessageFormat.Json)] 
List<Captacion> GetCaptaciones(int id_captador); 

包裝請求意味着應該在WCF方法作爲參數的輸入屬性的頂部有一些包裝器對象。

因此，像這樣

var input = 
     { 
      "CaptacionesInput": 
      { 
       "id_captador": 11 
      } 
     }; 

現在WCF方法變得像

List<Captacion> GetCaptaciones(CaptacionesInputType CaptacionesInput);