django 使用form组件提交数据之form表单提交
django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率。
最近遇到一个问题:
当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据。
分析问题:
由于form的POST 请求发出去后会刷新整个页面,自然无法保留上次输入的内容。
解决问题:
采用ajax的方式发出请求,避免刷新整个页面。
ajax是脑海里第一个冒出的想法,但经过了解form组件内部的更多参数以及原理,发现其实也可以在form发出
POST请求时保留上次输入的内容。这里面有个关键是: 可以使用form组件在前端页面中生成html标签。
下面贴下代码:
1.先在后台创建基于Form的类,在类中创建字段以此定义规则。
from django.forms import Form,fields class RegisterForm(Form): user = fields.CharField( min_length=6, max_length=16, error_messages={'min_length':'太短了','max_length':'太长了'}, label='用户名', ) password = fields.CharField( min_length=6, max_length=16, error_messages={'min_length':'太短了','max_length':'太长了'}, label='密码', ) email = fields.EmailField( label='邮箱', )
2.前端页面代码
代码中obj是从后台传过来的,代表的是Form类的对象。在Django中,可以将obj传到前端。
通过obj点出类中的字段名称。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="POST" action="/register/" novalidate> <p> {{ obj.user.label }}{{ obj.user }} {{ obj.errors.user.0 }} </p> <p> {{ obj.password.label }} {{ obj.password }} {{ obj.errors.password.0 }} </p> <p> {{ obj.email.label }} {{ obj.email }} {{obj.errors.email.0 }} </p> <input type="submit"/> </form> </body> </html>
3.后台逻辑代码
def register(request): if request.method=='GET': obj = RegisterForm() #当通过get请求来到注册页面时,没有携带数据,obj生成的html标签就自然没有values值 return render(request,'register.html',{'obj':obj}) else: obj=RegisterForm(request.POST)#post请求发来了数据,此时obj中有values v = obj.is_valid()#验证 if v: print(obj.cleaned_data)#验证正确时在后台输出数据 return redirect('http://www.baidu.com') else: print(obj.errors) #错误信息 print(obj['user']) #obj其实打印出来是一串html形式的字符串 此句得到的结果是 <input type="text" name="user" maxlength="16" minlength="6" required id="id_user"> return render(request,'register.html',{'obj':obj})#传回前端的obj,包含数据
print(obj)后得出的结果
<tr><th><label for="id_user">用户名:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="user" maxlength="16" minlength="6" required id="id_user"></td></tr>
<tr><th><label for="id_password">密码:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="password" maxlength="16" minlength="6" required id="id_password"></td></tr>
<tr><th><label for="id_email">邮箱:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="email" name="email" required id="id_email"></td></tr>