Angular2 - Parameter permintaan Http POST

Saya mencoba membuat permintaan POST tetapi saya tidak bisa membuatnya berfungsi:

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()));
          });
}

Saya pada dasarnya ingin mereplikasi permintaan http ini (bukan ajax) seperti yang berasal dari bentuk html:

URL: / api

Params: username dan password

Saya pikir body tidak benar untuk application/x-www-form-urlencodedtipe konten. Anda dapat mencoba menggunakan ini:

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

Semoga bisa membantu Anda, Thierry

Pembaruan untuk Angualar 4.3+

Sekarang kita dapat menggunakan HttpClientbukannyaHttp

Panduan ada di sini

Kode sampel

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();

Tidak digunakan lagi

Atau Anda bisa melakukan seperti ini:

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

Perbarui Oktober / 2017

Dari angular4 + , kami tidak membutuhkan headers, atau .toString()barang. Sebagai gantinya, Anda dapat melakukan seperti contoh di bawah ini

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

Metode 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()));
      }
    )

GET / DELETE metode

    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()));
      }
    )

Untuk application/jsonJenis Konten JSON

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

Di versi Angular2 yang lebih baru, tidak perlu mengatur Content-Typeheader dan pengkodean badan secara manual jika Anda meneruskan objek dengan jenis yang tepat sebagai body.

Anda bisa melakukan ini

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());
      });
}

Dengan cara ini sudut akan menyandikan tubuh untuk Anda dan akan mengatur Content-Typetajuk yang benar .

PS Jangan lupa untuk mengimpor URLSearchParamsdari @angular/httpatau tidak akan berhasil.

jadi hanya untuk membuatnya menjadi jawaban lengkap:

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;
                }
            });
    }

Semua jawaban ini sudah ketinggalan zaman untuk mereka yang menggunakan HttpClient daripada Http. Saya mulai menjadi gila berpikir, "Saya telah melakukan impor URLSearchParams tetapi masih tidak berfungsi tanpa .toString () dan header eksplisit!"

Dengan HttpClient, gunakan HttpParams sebagai ganti URLSearchParams dan catat body = body.append()sintaksnya untuk mencapai beberapa params di dalam tubuh karena kita bekerja dengan objek yang tidak bisa diubah:

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();
  }

Jika ada yang berjuang dengan versi sudut 4+ (milik saya 4.3.6) . Ini adalah kode contoh yang berhasil untuk saya.

Pertama tambahkan impor yang diperlukan

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

Kemudian untuk fungsi api. Ini adalah contoh login yang dapat diubah sesuai kebutuhan Anda.

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));
            }
        });
}

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)

Saya mengalami masalah dengan setiap pendekatan yang menggunakan beberapa parameter, tetapi berfungsi cukup baik dengan objek tunggal

api:

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

sudut:

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
    });
}

Saya mendarat di sini ketika saya mencoba melakukan hal serupa. Untuk jenis konten application / x-www-form-urlencoded, Anda dapat mencoba menggunakan ini untuk body:

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

dengan apa yang Anda coba lakukan, nilai yang ditetapkan ke body akan menjadi string.