javascript - Ajax/PythonBottle/Jquery/JSON 传递参数时遇到问题

Question

当此 AJAX 请求 POSTS 时，newUser() 函数表示没有传递任何参数，即使我已填写了 userInput 和 passInput 字段。 JS/JQ/AJAX:

            var userInput = document.getElementById('registerUsername');
            var passInput = document.getElementById('registerPassword');
            var message = document.getElementById('checkUsernameMessage');

            $(document).ready(function() {
                $('#submitRegisterButton').click(function () {
                    $.ajax({
                        type: "POST",
                        url: "/newUser",
                        data: JSON.stringify({"username":userInput, "password":passInput}),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        async: true,
                        cache: false, 
                        success: function (msg) {
                            $('#checkUsernameMessage').text(msg.d);
                        }
                    });
                });
            });

还有我的 python Bottle 函数 newUser() :

@post('/newUser')
def newUser(username, password):
    etc..

Answer 1

您需要将选择器嵌套在 dom 就绪调用中。现在它们在 DOM 准备好之前运行，因此返回未定义。您可以通过控制台变量来验证这一点，看看它们是否返回任何数据。

另一件事是，您可能想要选择这些输入的值，而不是返回 DOM 元素本身:因此，请尝试

var userInput = document.getElementById('registerUsername').value 等

        $(document).ready(function() {


            $('#submitRegisterButton').click(function () {

                var userInput = document.getElementById('registerUsername').value;
                var passInput = document.getElementById('registerPassword').value;
                var message = document.getElementById('checkUsernameMessage').value;

                $.ajax({
                    type: "POST",
                    url: "/newUser",
                    data: JSON.stringify({"username":userInput, "password":passInput}),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    cache: false, 
                    success: function (msg) {
                        $('#checkUsernameMessage').text(msg.d);
                    }
                });
            });
        });

这应该可以解决您的问题。

解决了客户端问题后，Python 问题是:

post 请求被调用为:def newUser( username, password ) 其中不应传入任何参数，而是从表单变量派生而来:

def newUser():
    username = request.forms.get('userInput')
    password = request.forms.get('passInput')
    message = request.forms.get('message')