首页 > 代码库 > Django之Form组件

Django之Form组件

2024-08-27 18:56:55   220人阅读

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})

 

Django之Form组件


联系
我们