Question

您好我正在尝试使用http get request和查询字符串获取数据。

我希望获取http网址为＆＃39; baseUrl＆＃39; +＆＃39; querystring＆＃39;喜欢 http://randomUrl.com/?var1=val1&var2=val2

我尝试使用如下所示的URLSearchParams但不知何故，而不是获取＆＃39; VAR1 = VAL1＆安培; VAR2 = val2的＆＃39;作为查询字符串，我正进入（状态 http://randomUrl.com/?[object%20Object]

以下是我的代码。我做错了什么？

在全局HttpClientService中，

get(path: string): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    headers.append('Access-Control-Allow-Headers', 'Content-Type');
    headers.append('Access-Control-Allow-Methods', 'GET');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append("X-Requested-With", "XMLHttpRequest");
    let options = new RequestOptions({ headers: headers });

    return this.http.get(`${baseURL.baseurl}${path}`, options)
        .map(this.extractdata)
        .catch(this.handleError);
}

在服务中， @Injectable（）导出类GetDataService {

  constructor(private http: HttpClient) { }

  getData(queryparams): Observable<any> {

    return this.http.get('/front/search?' + `${queryparams}`)
 }
}

在使用上述服务的组件中，

getData（）：void {

    let params = new URLSearchParams();
    params.set('var1', 'val1')
    params.set('var2', 'val2')
    params.set('var3', 'val3')

    this.getdata.getData({search:params})
        .subscribe
        (
        data => this.data = data,
        error => this.errorMessage = error
        )
}
ngOnInit(): void {
    this.getData();
}

我提前感谢您的帮助

Answer 1

我认为您传递的参数是一个对象数组。在这种情况下。尝试做：

let parameter: URLSearchParams = new URLSearchParams();
for(this.i = 0; this.i < param.length; this.i++) {
    parameter.set(param[this.i]['key'], param[this.i]['value']);
}

和

return this.http.get(URL_here, {search: parameter}).map(response => response.json());

Answer 2

URLSearchParams实际上会根据需要将字符串格式化为url，这意味着它会以正确的格式创建查询字符串，所以就像你想要的那样：

var1=val1&var2=val2&var3=val3

所以你真的不需要做任何其他事情，而不是在你的网址中传递它。请尝试以下方法：

getData(): void {
  let params = new URLSearchParams();
  params.set('var1', 'val1')
  params.set('var2', 'val2')
  params.set('var3', 'val3')

this.getdata.getData(params) // just pass the params as such
    .subscribe(
    data => this.data = data,
    error => this.errorMessage = error
    )
}

然后是您的服务：

get(path: string): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get(baseUrl, path, options) // notice, pass the baseUrl as string and then just pass the queryparams as such
        .map(this.extractdata)
        .catch(this.handleError);
}

为什么你得到[object%20Object]的原因是因为这一行：

this.getdata.getData({search:params})

在这里传递一个对象 - 你创建一个具有属性search的对象来保存你的查询字符串，这当然是你不想要的，因此只需传递你创建的查询字符串。

Angular2：使用查询字符串从服务器使用http get请求检索数据

2 个答案: