Angular 2 - Http 獲取請求 - 通過 json Object

Question

我怎樣才能做一個 http 獲取請求並傳遞一個 json Object

這是我的 json 對象

{{firstname:"Peter", lastname:"Test"}

而這個 Object 我想傳遞 http 請求以獲取匹配人員列表。

這怎么可能？ 此示例僅顯示一個簡單的獲取請求，結果為 json。 我該如何修改它？

 //Component: person:Person; persons:Person []; .... //Whre can I pass the person, here in the service?? getMatchedPersons(){ this.httpService.getMatchedPersons().subscribe( data => this.persons = data, error => aller(error) ); ); //SERVICE //pass parameters?? how to send the person object here? getMatchedPersons(){ return this.http.get('url').map(res => res.json()); }

Answer 1

Http.get方法將實現RequestOptionsArgs的對象作為第二個參數。

該對象的搜索字段可用於設置字符串或URLSearchParams對象。

一個例子：

 // Parameters obj-
 let params: URLSearchParams = new URLSearchParams();
 params.set('firstname', yourFirstNameData);
 params.set('lastname', yourLastNameData);

 //Http request-
 return this.http.get('url', {
   search: params
 }).subscribe(
   (response) => //some manipulation with response 
 );

Answer 2

對於純 javascript：

您必須將 json 序列化為參數列表：

?firstname=peter&lastname=test

並將其附加到 URL 中，因為GET請求沒有正文。

有幾種方法可以將 JSON 轉換為 QueryParameters。 他們在這個問題中得到解決： 是否有任何本機函數可以將 json 轉換為 url 參數？

在那里你可以選擇你喜歡的毒葯，我的是：

function obj_to_query(obj) {
    var parts = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
        }
    }
    return "?" + parts.join('&');
}

但請注意， GET請求必須遵守基於此答案的 URL 限制，建議保持在2000 個字符以下以確保安全：

RFC 說 8000
IE8 和 IE9 最高可達 2083
搜索引擎只能讀取到 2048

使用 Angular2 URLSearchParams

用一個普通的JSON轉換為一個參數可以使用的相同的方法URLSearchParams通過РомаСкидан的建議：

 let params: URLSearchParams = objToSearchParams(obj);

 return this.http.get('url', {
   search: params
 }).subscribe(
   (response) => //some manipulation with response 
 );

 function objToSearchParams(obj): URLSearchParams{
    let params: URLSearchParams = new URLSearchParams();
    for (var key in obj) {
        if (obj.hasOwnProperty(key))
            params.set(key, obj[key]);
    }
    return params;
 }

Answer 3

也許您想對 json 對象進行字符串化

var json = JSON.stringify(myObj);

this.http.get('url'+'?myobj='+encodeURIComponent(json))

Answer 4

使用POST請求將對象傳遞給服務器：

//SERVICE
getMatchedPersons(searchObj: any){
    return this.http.post('url', JSON.stringify(searchObj))
                    .map(res => res.json());
}

然后你可以傳遞任何你想要的 JS 對象並將它發送到你的 http 請求中的服務器。

getMatchedPersons(searchObj: any){
    this.httpService.getMatchedPersons(searchObj: any).subscribe(
        data =>  this.persons = data,
        error => alert(error);
    );
); 

Answer 5

類似於 AngJobs 的，但也許更新了？？ 不需要調用encodeURIComponent 。 這是角度：

const stringifiedParams = JSON.stringify(this.filterParams);
return this.http.get<any[]>(`persons`, {params: {filter: stringifiedParams}});

在服務器節點上，使用JSON.parse反序列化參數：

filter = JSON.parse(req.query.filter.toString());

Answer 6

實際上有一種更簡單的方法來刷新參數

getMatchedPersons(myObject: any): Observable<Person[]> {
    return this.http.get<Person[]>('url', { params: { ...myObject } });
}

• 上面的代碼表示一個 function 接受一個JSON object myObject作為參數。

• HttpClient.get方法接受一個options參數作為它的第二個參數。

• options參數包含許多有用的鍵，但在我們的例子中我們只對params鍵感興趣。

• params的值是{...myObject } ，也就是說，我們使用擴展運算符傳遞 object 中的所有key:value對。

請參閱這將完成工作，並且不會使 URL 看起來很難看? 和key=value和&字符，當然在任何一種情況下都不會向用戶顯示這些參數，因為它只是一個HTTP調用，但是，如果有人使用記錄器interceptor ，他們將有一個干凈的日志。