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 ，他们将有一个干净的日志。