Passing data in POST request

Question

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?

Answer 1

You should remove the JSON.stringify calls here as they are adding unnecessary double quotes around the values making them invalid:

"data": {
    "password": document.getElementById("password").value,
    "username": document.getElementById("username").value
}

So instead of sending the value apurv as password you are sending "apurv" which is not the correct password.

Answer 2

the return value of "getElementById().value" is string, but "JSON.stringify()" is for converting object into string. that means you are trying to convert string to string. that's why the error occurred.