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": "/",
            "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?

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./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?

• javascript
• ajax
• reactjs
• post

Share Follow asked Jan 20, 2017 at 10:54 EdGEdG 2,35199 gold badges5252 silver badges110110 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.