angular - url angular 2 中的 Http Post 参数

Question

所以，我在 Javascript 中有下一个代码，其中值在 URL 中发送

//params = 5
function httpPostAsync(url, params){
    // test: curl -X POST http://url/brightness/5
    var http = new XMLHttpRequest();
    http.open("POST", "/brightness/"+ params , true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.onreadystatechange = function() {
        if(http.readyState == 4 && http.status == 200) {
            //Popup good for debugging
        }
    }
    http.send(null);
}

我的问题是，如何在 Angular 中执行此操作？我有下一个代码，但它不会在 URL 中发送值“5”

//服务

  postValue(data) {
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({ headers: headers });
    let params = new URLSearchParams();
    params.append('value', data);
    return this.http.post(url, params.toString(), options)
      .timeoutWith(2000);
  }

//组件

let value = 5;
this._localserverService.postValue(value).subscribe();

我知道当我发送带有 form-urlencoded 内容类型的数据时，我应该以带有键=值对的查询字符串格式发送数据。但这在我的旧代码中是不需要的。

我还知道 http.post 的第二个参数是消息的主体(有效负载)而不是 URL 搜索参数。

我应该做什么不同的事情？

谢谢!

Answer 1

在这种情况下，您只需将 data 附加到您的 URL:

postValue(data) {
    // You might not even need to set the header, as you body is anyway empty...
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(`url/${data}`, null, options)
      .timeoutWith(2000);
  }

URLSearchParams 用于查询字符串参数(类似于 http://url/brightness?value=5)，但是如果您想要 5 作为 URL 的一部分(所以 http://url/brightness/5)，上面的代码应该可以做到这一点。