HTML端form表单提交数据
views.py
from django.shortcuts import render, HttpResponse from django import forms # 引入forms模块 class my_form(forms.Form): # 创建form类 必须继承forms.Form name = forms.CharField( max_length=12, # 设置约束 最大字符为12 min_length=6, error_messages={ # 错误信息 key为错误代码 字典中的key对应约束的名称(max_length) value为中文提示 "max_length": "不得超过12字符", "min_length": "不得少于6字符", "required": "不得为空", } ) email = forms.EmailField( # 邮箱类型 error_messages={ "required": "不得为空", "invalid": "邮箱格式不正确", } ) def login(request): obj = my_form() # 实例化form对象 if request.method == "GET": return render(request, "login.html", {"obj": obj}) if request.method == "POST": obj = my_form(request.POST) # 实例化form对象 django会自动获取request.POST中的符合my_form类中的数据(name,email) # 所以HTML端提供的数据必须和form对象的属性字段名称一致 if obj.is_valid(): # .is_valid()判断数据是否满足格式 print(obj.clean()) # .clean()得到字典形式的数据 取值再对数据进行处理 # {'name': '111111111', 'email': 'ididididididid@qq.com'} else: print(obj.errors.as_json()) # .errors.as_json()得到错误信息 类型为<class 'str'>的数据 # {"name": [{"message": "This field is required.", "code": "required"}], "email": [{"message": "Enter a valid email address.", "code": "invalid"}]} return render(request, "login.html", {"obj": obj})
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="{% url "login001" %}" method="post"> {# name属性的值 必须和FORM类中对应的属性字段名称一致 这样FORM对象才会取到对应的值#} <input type="text" name="name" placeholder="姓名">{{ obj.errors.name.0 }}<br> <input type="text" name="email" placeholder="邮箱">{{ obj.errors.email.0 }}<br> <input type="submit" value="确认"> </form> </body> </html>
完美运行
HTML中form表单提交数据后会刷新整个页面,假设填写信息错误,那么提交数据后整个页面刷新,之前填写的信息都会清空
想要保留提交前的所有数据,就必须用到django提供的form组件动态生成标签
AJAX提交数据不会刷新页面,所以不存在该问题
只需要改动HTML代码即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="{% url "login001" %}" method="post"> {{ obj.name }}{{ obj.errors.name.0 }}<br> {{ obj.email }}{{ obj.errors.email.0 }}<br> <input type="submit" value="确认"> </form> </body> </html>
HTML端ajax提交数据
新建login_ajax.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.1.1.js"></script> <style> .hide { display: none; } </style> </head> <body> <input type="text" id="name" name="name" placeholder="姓名"> <input type="text" id="name_msg" readonly class="hide"><br> <input type="text" id="email" name="email" placeholder="邮箱"> <input type="text" id="email_msg" readonly class="hide"><br> <button id="ajax_submit">确认</button> <script> $("#ajax_submit").click(function () { $.ajax({ url: "django_form/login_ajax", type: "POST", data: {"name": $("#name").val(), "email": $("#email").val()}, success: function (arg) { arg = JSON.parse(arg) console.log(arg) if(!arg["status"]){ $("#email_msg").removeClass("hide") .val(arg["errors"]['email'][0]) $("#name_msg").removeClass("hide") .val(arg["errors"]['name'][0]) } } }) }) </script> </body> </html>
在views.py中添加函数:
import json from django.core.exceptions import ValidationError class my_jsonencoder(json.JSONEncoder): # 自定义json序列化 需要继承json.JSONEncoder def default(self, o): if isinstance(o, ValidationError): # 如果O是ValidationError类型的数据或者对象 a = list(o) # a=['不得为空'] return a[0] # 返回'不得为空' def login_ajax(request): obj = my_form() if request.method == "POST": print("Aaaa") ret = {"status": True, "errors": None, "data": None} # 返回给前端的数据 obj = my_form(request.POST) if obj.is_valid(): print(obj.clean()) else: ret["status"] = False ret["errors"] = obj.errors.as_data() print(ret["errors"]) # {'name': [ValidationError(['不得为空'])], 'email': [ValidationError(['不得为空'])]} print(ret["errors"]["name"][0]) # ['不得为空'] 但是从 print(ret["errors"])可以看出该数据是ValidationError对象 # 需要将此数据变成可转换成json字符串的数据 print(type(ret["errors"]["name"][0])) # <class 'django.core.exceptions.ValidationError'> # 执行到此,我们知道ajax与后台的交互是通过json数据进行的, # 我们发现ret["errors"]中包含不能转换成json字符串的ValidationError对象 # 所以我们需要自定义json序列化,将ValidationError转换成json字符串 return HttpResponse(json.dumps(ret, cls=my_jsonencoder)) # cls=自定义序列化对象 ret就是my_jsonencoder中的O if request.method == "GET": return render(request, "login_ajax.html", {"obj": obj})