在POST请求中传递数据

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?

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.

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.