typescript - Angular2 - Http POST forespørselsparametere

Jeg prøver å lage en POST-forespørsel, men jeg får det ikke til å fungere:

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

Jeg vil i utgangspunktet replikere denne HTTP-forespørselen (ikke AJAX) som om den ble sendt fra et HTML-skjema:

URL: /api

Parametere: brukernavn og passord

Svar #1

Oppdatering for Angular 4.3+

Nå kan vi bruke HttpClient i stedet for Http

Guiden er her

Eksempelkode

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

Utdatert

Eller du kan gjøre slik:

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

Oppdatering okt/2017

Fra angular4+ trenger vi ikke headers eller .toString()-ting. I stedet kan du gjøre som i eksemplet nedenfor

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

POST/PUT-metode

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

For JSON application/json innholdstype

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

Svar #2

Jeg tror at kroppen ikke er korrekt for en application/x-www-form-urlencoded-innholdstype. Du kan prøve å bruke dette:

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

Håper det hjelper deg, Thierry

Svar #3

I senere versjoner av Angular2 er det ikke nødvendig å manuelt sette Content-Type-headeren og kode kroppen hvis du sender et objekt av riktig type som body.

Du kan ganske enkelt gjøre dette

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

På denne måten vil Angular kode kroppen for deg og sette riktig Content-Type-header.

P.S. Ikke glem å importere URLSearchParams fra @angular/http ellers vil det ikke fungere.

Svar #4

så bare for å gjøre det til et komplett svar:

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

Relaterte artikler