javascript - web.input() 不接收表单数据

Question

所以我正在尝试创建一个简单的注册表单，供用户输入他们的信息并提交以供处理。我在获取表单数据时遇到问题。该站点的设置方式是，我有“/register”表单，然后将 ajax 请求发送到 url“/postregister”。从那里，进入从 web.input() 获取数据的类，然后根据需要引用数据。或者至少这是意图...

我遇到的问题在于第一步:从“/register”页面获取表单数据。实际上没有传递任何东西。

这是register.html

<div class="container">
    <h2>Register Account</h2>
    <br /><br />
    <form id="register-form">
        <div class="form-group label-static is-empty>
        <label for="username" class="control-label">Username</label>
        <input id="username" class="form-control" type="text" placeholder="Choose a username..."/>
    </div>
    <button type="submit" class="btn btn-info">Submit </button>
    </form>
</div>

主 Controller .py:

import web

urls = (
    '/', 'Home',
    '/register', 'Register',
    '/postregistration', 'PostRegistration'
)

render = web.template.render("Views/Templates", base="MainLayout")
app = web.application(urls, globals())

class Home:
    def GET(self):
        return render.Home()

class Register:
    def GET(self):
        return self.Register()

class PostRegistration:
    def POST(self):
        data = web.input()
        print "data:   " + str(data) # This line is for debugging
        return data.username

if __name__ == "__main__":
    app.run()

加上js:

$(document).ready(function() {
    console.log("loaded");

    $(document).on("submit", "#register-form", function(e) {
        e.preventDefault();

        var form = $("#register-form").serialize();
        console.log(form); //This is just for debugging
    $.ajax({
        url: '/postregistration',
        type: 'POST',
        data: form,
        success: function(response){
        console.log(response);
        }
    });
    });
});

当我运行 controller.py 并导航到 localhost:8080/register 时，系统会提示我填写表单。 成功! 现在我输入信息并单击提交。 问题!! 检查控制台日志时，实际上并未捕获表单。引发“AttributeError”，AttributeError: 'username'。果然，controller.py 打印:

data:   <storage {}>

所以我看到 web.input() 没有获取任何数据。再往前一点，在 Web 控制台中，我可以看到写有“已加载”，然后当我单击提交时，我可以看到向控制台写入了一些内容(但实际上什么也没有)。同样，所有迹象都表明我没有获取表单数据。我哪里出错了？

Answer 1

看起来序列化方法忽略了所有字段，因为它们不包含名称属性。如果你像这样将它添加到寄存器条目中:

<div class="form-group label-static is-empty">
        <label for="username" class="control-label">Username</label>
        <input id="username" class="form-control" type="text" name="username" placeholder="Choose a username" />
</div>

然后表单变量将被填充。当尝试访问带有 data.username.... 行的字段时，这仍然会返回 500 错误。

来源: JavaScript - Getting HTML form values https://api.jquery.com/serialize/