I want to post data in the POST request. I have a login form which looks like this
render(){
return (
<div className="LoginPage">
<div className="login-page">
<div className="form">
<form className="login-form">
<input id="username" type="username" placeholder="username"/>
<input id="password" type="password" placeholder="password"/>
<p className="message">Not registered? <a href="#">Request Username and Password</a></p>
</form>
<button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
</div>
</div>
</div>
);
}
I am making a POST request in handleLoginButtonClick
handleLoginButtonClick() {
let token;
var settings = {
"async": true,
"crossDomain": true,
"url": "https://trigger-backend.appspot.com/auth/login/",
"method": "POST",
"credentials": 'include',
"headers": {
"content-type": "application/x-www-form-urlencoded",
},
"data": {
"password": JSON.stringify(document.getElementById("password").value),
"username": JSON.stringify(document.getElementById("username").value)
},
success: function( data, textStatus, jQxhr ){
// alert("success");
},
}
$.ajax(settings).done((response) => {
token = JSON.stringify(response.auth_token)
this.context.router.push('/app')
});
So I am currently including the data like this
"data": {
"password": JSON.stringify(document.getElementById("password").value),
"username": JSON.stringify(document.getElementById("username").value)
}
But api gives me a 400 error like this
But at the same time if I pass the data like this then it works
"data": {
"password": "apurv",
"username": "Apurv"
},
what is the problem here. Both should be same, right?