Angular2 - Tham số yêu cầu Http POST

Tôi đang cố gắng thực hiện một yêu cầu ĐĂNG nhưng tôi không thể làm cho nó hoạt động:

testRequest() {
      var body = 'username=myusername?password=mypassword';
      var headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');

      this.http
        .post('/api',
          body, {
            headers: headers
          })
          .subscribe(data => {
                alert('ok');
          }, error => {
              console.log(JSON.stringify(error.json()));
          });
}

Về cơ bản tôi muốn sao chép yêu cầu http này (không phải ajax) giống như nó được bắt nguồn bởi một biểu mẫu html:

URL: / api

Tham số: tên người dùng và mật khẩu

Tôi nghĩ rằng application/x-www-form-urlencodednội dung không chính xác cho một loại nội dung. Bạn có thể thử sử dụng cái này:

var body = 'username=myusername&password=mypassword';

Hy vọng nó sẽ giúp bạn, Thierry

Cập nhật cho Angualar 4.3+

Bây giờ chúng ta có thể sử dụng HttpClientthay vìHttp

Hướng dẫn ở đây

Mã mẫu

const myheader = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
let body = new HttpParams();
body = body.set('username', USERNAME);
body = body.set('password', PASSWORD);
http
  .post('/api', body, {
    headers: myheader),
  })
  .subscribe();

Không được chấp nhận

Hoặc bạn có thể làm như sau:

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
let body = urlSearchParams.toString()

Cập nhật tháng 10/2017

Từ angle4 + , chúng tôi không cần headers, hoặc .toString()chất liệu. Thay vào đó, bạn có thể làm như ví dụ dưới đây

import { URLSearchParams } from '@angular/http';

Phương thức POST / PUT

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
this.http.post('/api', urlSearchParams).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

Phương thức GET / DELETE

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', username);
    urlSearchParams.append('password', password);
    this.http.get('/api', { search: urlSearchParams }).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

Đối với loại application/jsonnội dung JSON

this.http.post('/api',
      JSON.stringify({
        username: username,
        password: password,
      })).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
      )

Trong các phiên bản sau của Angular2, không cần thiết lập thủ công Content-Typetiêu đề và mã hóa phần nội dung nếu bạn chuyển một đối tượng đúng loại như body.

Bạn chỉ có thể làm điều này

import { URLSearchParams } from "@angular/http"


testRequest() {
  let data = new URLSearchParams();
  data.append('username', username);
  data.append('password', password);

  this.http
    .post('/api', data)
      .subscribe(data => {
            alert('ok');
      }, error => {
          console.log(error.json());
      });
}

Bằng cách này, góc sẽ mã hóa phần nội dung cho bạn và sẽ đặt Content-Typetiêu đề chính xác .

PS Đừng quên nhập URLSearchParamstừ @angular/httpnếu không nó sẽ không hoạt động.

vì vậy chỉ để biến nó thành một câu trả lời hoàn chỉnh:

login(username, password) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        let urlSearchParams = new URLSearchParams();
        urlSearchParams.append('username', username);
        urlSearchParams.append('password', password);
        let body = urlSearchParams.toString()
        return this.http.post('http://localHost:3000/users/login', body, {headers:headers})
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                console.log(response);
                var body = response.json();
                console.log(body);
                if (body.response){
                    let user = response.json();
                    if (user && user.token) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('currentUser', JSON.stringify(user)); 
                    }
                }
                else{
                    return body;
                }
            });
    }

Những câu trả lời này đều đã lỗi thời đối với những người sử dụng HttpClient hơn là Http. Tôi bắt đầu phát điên khi nghĩ rằng, "Tôi đã thực hiện nhập URLSearchParams nhưng nó vẫn không hoạt động nếu không có .toString () và tiêu đề rõ ràng!"

Với HttpClient, hãy sử dụng HttpParams thay vì URLSearchParams và lưu ý body = body.append()cú pháp để đạt được nhiều tham số trong phần thân vì chúng tôi đang làm việc với một đối tượng không thể thay đổi:

login(userName: string, password: string): Promise<boolean> {
    if (!userName || !password) {
      return Promise.resolve(false);
    }

    let body: HttpParams = new HttpParams();
    body = body.append('grant_type', 'password');
    body = body.append('username', userName);
    body = body.append('password', password);

    return this.http.post(this.url, body)
      .map(res => {
        if (res) {          
          return true;
        }
        return false;
      })
      .toPromise();
  }

Nếu ai đang gặp khó khăn với phiên bản 4+ góc cạnh (của tôi là 4.3.6) . Đây là mã mẫu phù hợp với tôi.

Đầu tiên hãy thêm các mục nhập bắt buộc

import { Http, Headers, Response, URLSearchParams } from '@angular/http';

Sau đó cho hàm api. Đó là một mẫu đăng nhập có thể được thay đổi theo nhu cầu của bạn.

login(username: string, password: string) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', username);
    urlSearchParams.append('password', password);
    let body = urlSearchParams.toString()

    return this.http.post('http://localhost:3000/api/v1/login', body, {headers: headers})
        .map((response: Response) => {
            // login successful if user.status = success in the response
            let user = response.json();
            console.log(user.status)
            if (user && "success" == user.status) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user.data));
            }
        });
}

Tôi gặp vấn đề với mọi cách tiếp cận sử dụng nhiều tham số, nhưng nó hoạt động khá tốt với một đối tượng

api:

    [HttpPut]
    [Route("addfeeratevalue")]
    public object AddFeeRateValue(MyValeObject val)

góc cạnh:

var o = {ID:rateId, AMOUNT_TO: amountTo, VALUE: value};
return this.http.put('/api/ctrl/mymethod', JSON.stringify(o), this.getPutHeaders());


private getPutHeaders(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new RequestOptions({
        headers: headers
        , withCredentials: true // optional when using windows auth
    });
}

angular: 
    MethodName(stringValue: any): Observable<any> {
    let params = new HttpParams();
    params = params.append('categoryName', stringValue);

    return this.http.post('yoururl', '', {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      params: params,
      responseType: "json"
    })
  }

api:   
  [HttpPost("[action]")]
  public object Method(string categoryName)

Tôi đã hạ cánh ở đây khi tôi đang cố gắng làm một điều tương tự. Đối với loại nội dung application / x-www-form-urlencoded, bạn có thể thử sử dụng loại nội dung này cho phần nội dung:

var body = 'username' =myusername & 'password'=mypassword;

với những gì bạn đã thử thực hiện, giá trị được gán cho body sẽ là một chuỗi.