Angular2 - Http POST istek parametreleri

POST isteğinde bulunmaya çalışıyorum ama çalıştıramıyorum:

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

Temel olarak bu http isteğini (ajax değil) bir html formu tarafından oluşturulmuş gibi çoğaltmak istiyorum:

URL: / api

Parametreler: kullanıcı adı ve şifre

Vücudun bir application/x-www-form-urlencodediçerik türü için doğru olmadığını düşünüyorum . Bunu kullanmayı deneyebilirsiniz:

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

Umarım sana yardımcı olur, Thierry

Angualar 4.3+ güncellemesi

Şimdi HttpClientyerine kullanabilirizHttp

Rehber burada

Basit kod

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

Kullanımdan kaldırıldı

Veya bunun gibi yapabilirsiniz:

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

Güncelleme Ekim / 2017

Gönderen angular4 + , ihtiyacımız yok headers, ya da .toString()maddeler. Bunun yerine, aşağıdaki örnekte olduğu gibi yapabilirsiniz

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

POST / PUT yöntemi

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 yöntemi

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

JSON application/jsonContent-Type için

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

Angular2'nin sonraki sürümlerinde Content-Type, doğru türde bir nesneyi olarak iletirseniz, başlığı manuel olarak ayarlamanıza ve gövdeyi kodlamanıza gerek yoktur body.

Bunu basitçe yapabilirsin

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

Bu şekilde açısal, bedeni sizin için kodlayacak ve doğru Content-Typebaşlığı ayarlayacaktır .

PS Do içe unutmayın URLSearchParamsgelen @angular/httpveya işe yaramaz.

tam bir cevap yapmak için:

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

Bu yanıtların tümü, Http yerine HttpClient kullananlar için geçerliliğini yitirmiştir. "URLSearchParams'ın içe aktarımını yaptım ama yine de .toString () ve açık başlık olmadan çalışmıyor!" Diye düşünmeye başlıyordum.

HttpClient ile URLSearchParams yerine HttpParams kullanın ve body = body.append()değişmez bir nesneyle çalıştığımız için vücutta birden çok parametre elde etmek için sözdizimini not edin :

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

Açısal sürüm 4+ ile mücadele eden biri varsa (benimki 4.3.6 idi) . Bu benim için çalışan örnek koddu.

Önce gerekli içe aktarmaları ekleyin

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

Daha sonra api işlevi için. İhtiyaçlarınıza göre değiştirilebilen bir giriş örneğidir.

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)

Birden çok parametre kullanan her yaklaşımda sorun yaşıyordum, ancak tek nesne ile oldukça iyi çalışıyor

api:

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

açısal:

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

Ben de benzer bir şey yapmaya çalışırken buraya indim. Bir uygulama / x-www-form-urlencoded içerik türü için, bunu gövde için kullanmayı deneyebilirsiniz:

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

Yapmaya çalıştığınız şey gövdeye atanan değer bir dizge olacaktır.