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>

主控制器.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

我认为你的jQuery选择器错了：

var form = $("register-form").serialize();

应该

var form = $("#register-form").serialize();

Source

这可能导致没有为.serialize（）选择元素来序列化。

Answer 2

看起来serialize方法省略了所有字段，因为它们不包含name属性。如果你把它添加到这样的寄存器条目：

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

Answer 3

缩进错误：

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

需要：

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

在jquery方面，.serialize()将忽略所有没有name属性的输入。这就是为什么你没有通过网络发送任何内容的原因。

解决方案是在您的输入中添加name='username'。

web.input（）不接受表单数据

3 个答案: