Angular2 - Http POST 요청 매개 변수

Angular2 - Http POST 요청 매개 변수

POST 요청을 하려고 하는데 작동이 안 됩니다.

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

기본적으로 html 형식에서 시작된 것처럼 이 http 요청(Ajax가 아님)을 복제하고 싶습니다.

URL: /api

매개 변수: 사용자 이름 및 암호

Angualar 4.3+에 대한 업데이트

이제 사용할 수 있습니다.HttpClient대신에Http

가이드가 왔습니다.

샘플코드

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

---

사용되지 않음

또는 다음과 같이 할 수 있습니다.

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

---

2017년 10월 업데이트

angular4+부터, 우리는 필요하지 않습니다.headers또는.toString()물건들대신 아래 예시와 같이 할 수 있습니다.

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

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 방법

    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/json내용 유형

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

제 생각에 그 몸은 당분간 정확하지 않습니다.application/x-www-form-urlencoded내용 유형.다음을 사용할 수 있습니다.

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

도움이 되길 바래, 티에리

Angular2 이후 버전에서는 수동으로 설정할 필요가 없습니다.Content-Type올바른 유형의 개체를 전달하는 경우 헤더 및 본문 인코딩body.

당신은 이것을 간단히 할 수 있습니다.

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

이 각도를 사용하면 차체를 인코딩하고 올바른 설정을 할 수 있습니다.Content-Type표제의

추신. 잊지 말고 가져오기URLSearchParams부터@angular/http그렇지 않으면 작동하지 않을 것입니다.

그래서 완벽한 답을 만들기 위해서야:

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

이러한 답변은 모두 Http가 아닌 HttpClient를 사용하는 답변에 사용되지 않습니다.저는 "URLsearchParams를 가져왔지만 .toString()과 명시적인 헤더 없이는 작동하지 않습니다!"라고 생각하기 시작했습니다.

HttpClient와 함께 URLsearchParams 대신 HttpParams를 사용하여body = body.append()불변 객체로 작업하기 때문에 본문에서 다중 매개 변수를 달성하기 위한 구문:

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

각진 버전 4+(내 것은 4.3.6)로 어려움을 겪고 있는 사람이 있다면요.이것이 저에게 효과가 있었던 샘플 코드였습니다.

먼저 필요한 가져오기 추가

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

그러면 api 기능.필요에 따라 변경할 수 있는 로그인 샘플입니다.

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)

여러 매개 변수를 사용하는 모든 접근 방식에 문제가 있었지만 단일 개체에서 매우 잘 작동합니다.

api:

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

각도:

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

제가 비슷한 일을 하려고 할 때 여기에 착륙했습니다.응용 프로그램/x-www-form-url 인코딩된 내용 유형의 경우 본문에 대해 다음을 사용할 수 있습니다.

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

본문에 할당된 값을 수행하려고 시도한 경우 문자열이 됩니다.

언급URL : https://stackoverflow.com/questions/35212341/angular2-http-post-request-parameters