在 POST 请求中传递数据答案

【问题标题】：Passing data in POST request在 POST 请求中传递数据
【发布时间】：2017-01-20 10:54:05
【问题描述】：

我想在 POST 请求中发布数据。我有一个看起来像这样的登录表单

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>
        );
    }

我在 handleLoginButtonClick 中发出 POST 请求

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')
        });

所以我目前包括这样的数据

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

但是 api 给了我这样的 400 错误

但与此同时，如果我像这样传递数据，那么它会起作用

"data": {
                "password": "apurv",
                "username": "Apurv"
            },

这里有什么问题。两者应该是一样的吧？

【问题讨论】：

标签： javascript ajax reactjs post

【解决方案1】：

您应该在此处删除 JSON.stringify 调用，因为它们在值周围添加了不必要的双引号，使它们无效：

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

所以不是发送值apurv 作为密码，而是发送"apurv"，这不是正确的密码。

【讨论】：

但有一个疑问。 “数据”：{“密码”：“apurv”，“用户名”：“Apurv”}，我只发送“apurv”作为密码。但这行得通。为什么？
因为您发送正确："data": { "password": "apurv", "username": "Apurv" }。另一方面 JSON stringify 这样做："data": { "password": "\"apurv\"", "username": "\"Apurv\"" }。你能看出区别吗？

【解决方案2】：

“getElementById().value”的返回值为字符串，但“JSON.stringify()”用于将对象转换为字符串。这意味着您正在尝试将字符串转换为字符串。这就是发生错误的原因。

【讨论】：