Parâmetros do pedido POST Angular2-Http
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()));
});
}
eu basicamente quero replicar este pedido http (não ajax) como se fosse originado por um formulário html:
URL: / api
Parâmetros: nome de utilizador e senha
8 answers
Acho que o corpo não está correcto para um tipo de conteúdo application/x-www-form-urlencoded
. Você poderia tentar usar isto:
var body = 'username=myusername&password=mypassword';
Espero que te ajude.,
Thierry
Actualização para Angualar 4.3+
Agora podemos usar HttpClient
em vez de Http
Código da amostra
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();
Desactualizado
Ou podes fazer assim:
let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
let body = urlSearchParams.toString()
Actualizar O PTU/2017
De angular4+, não precisamos de headers
, ou .toString()
coisas. Em vez disso, você pode fazer como abaixo exemplo
import { URLSearchParams } from '@angular/http';
Método 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()));
}
)
OBTER / APAGAR método
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()));
}
)
Para JSON application/json
Content-Type
this.http.post('/api',
JSON.stringify({
username: username,
password: password,
})).subscribe(
data => {
alert('ok');
},
error => {
console.log(JSON.stringify(error.json()));
}
)
Nas versões posteriores do Angular2 não há necessidade de definir manualmente o cabeçalho Content-Type
e codificar o corpo se passar por um objecto do tipo certo como body
.
Você simplesmente pode fazer isso
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());
});
}
Desta forma, o angular irá codificar o corpo para si e irá definir o cabeçalho correcto Content-Type
.
P. S. não se esqueça de importar URLSearchParams
de @angular/http
ou não vai funcionar.
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;
}
});
}
Se alguém está a lutar com Versão angular 4+ (a minha era 4.3.6). Este era o código de amostra que funcionava para mim.
Primeiro adicionar as importações necessárias
import { Http, Headers, Response, URLSearchParams } from '@angular/http';
Então para a função api. É uma amostra de login que pode ser alterada de acordo com suas necessidades.
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));
}
});
}
Eu estava a ter problemas com cada abordagem usando vários parâmetros, mas funciona muito bem com um único objecto {[[4]}
Api:
[HttpPut]
[Route("addfeeratevalue")]
public object AddFeeRateValue(MyValeObject val)
Angular:
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
});
}
var body = 'username' =myusername & 'password'=mypassword;
Com o que tentaste fazer, o valor atribuído ao corpo será uma cadeia de caracteres.