饮冰三年-人工智能-Python-27 Django Form组件

其他 2019-02-15 23:34:38 阅读次数: 0

Django的Form主要具有一下几大功能：

  • 生成HTML标签
  • 验证用户数据（显示错误信息）
  • HTML Form提交保留上次提交数据
  • 初始化页面显示内容

后台逻辑（导包+建类）

from django.shortcuts import render,redirect,HttpResponse

from django import forms
from django.forms import fields

class F1Form(forms.Form):
    user=fields.CharField(
        required=True,
        min_length=6,
        max_length=16,
        error_messages={
            'required':'用户名不能为空',
            'min_length':'至少为6个字符',
            'max_length': '最多为16个字符',
        }
    )
    pwd = fields.CharField(
        required=True,
        min_length=6,
        max_length=16,
        error_messages={
            'required': '密码不能为空',
            'min_length': '至少为6个字符',
            'max_length': '最多为16个字符',
        }
    )
    age = fields.IntegerField(
        required=True,
        error_messages={
            'required': '年龄不能为空',
            'invalid': '年龄格式不正确',
        }
    )
    email = fields.EmailField(
        required=True,
        min_length=6,
        max_length=18,
        error_messages={
            'required': '邮箱不能为空',
            'min_length': '至少为6个字符',
            'max_length': '最多为18个字符',
            'invalid': '邮箱格式不正确',
        }
    )
def f1(request):
    if request.method=="GET":
        obj=F1Form()
        return render(request,'f1.html',{'obj':obj})
    else:
        obj = F1Form(request.POST)
        # 校验是否成功
        if obj.is_valid():
            return redirect('http://www.baidu.com')
        else:
            return render(request,'f1.html',{'obj':obj})
导包+建类 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
</head>
<body>
     <form id="fm" action="/f1.html" method="POST">
         <p>{{obj.user}}{{ obj.errors.user.0 }}</p>
         <p>{{obj.pwd}}{{ obj.errors.pwd.0 }}</p>
         <p>{{obj.age}}{{ obj.errors.age.0 }}</p>
         <p>{{obj.email}}{{ obj.errors.email.0 }}</p>
         <input type="submit" value="提交"/>
     </form>
    <script src="/static/js/jquery-3.3.1.min.js"></script>

</body>
</html>
前端html

 小试牛刀：实现一套“增删改” 

　　1：创建Model模型并生成数据表

from django.db import models

# Create your models here.
class UserInfo(models.Model):
    username=models.CharField(max_length=16)
    email = models.EmailField(max_length=16)
UserInfo

　　2：创建Form文件

from django import forms
from django.forms import fields


class UserInfoForm(forms.Form):
    username = forms.CharField(
        required=True,
        max_length=16,
        error_messages={
            "required": "姓名不能为空",
            "max_length": '姓名最大长度不能超过16位'
        }
    )
    email = forms.EmailField(
        required=True,
        min_length=6,
        error_messages={
        "required": "邮箱不能为空",
        "min_length": '邮箱最小长度不能低于6位',
        "invalid":"邮箱格式不正确"
    })
UserInfoForm

　　3：创建View文件并修改url配置 

from django.shortcuts import render, redirect, HttpResponse
from App01.models import UserInfo
from App01.Forms.UserInfo import UserInfoForm


def user_list(request):
    # 获取用户信息列表
    obj = UserInfo.objects.all()
    return render(request, "FormTest/user_list.html", {"obj": obj})


def user_add(request):
    # 添加用户
    if request.method == 'GET':
        obj = UserInfoForm()
        return render(request, "FormTest/user_add.html", {"obj": obj})
    else:
        obj = UserInfoForm(request.POST)
        if obj.is_valid():
            UserInfo.objects.create(**obj.cleaned_data)
            return redirect('/user_list')
        else:
            return render(request, "FormTest/user_add.html", {"obj": obj})


def user_edit(request,nid):
    # 编辑用户
    if request.method == 'GET':
        enti = UserInfo.objects.filter(id=nid).first()
        obj = UserInfoForm({"username":enti.username,"email":enti.email})
        return render(request, "FormTest/user_edit.html", {"obj": obj,"nid":nid})
    else:
        obj = UserInfoForm(request.POST)
        if obj.is_valid():
            UserInfo.objects.filter(id=nid).update(**obj.cleaned_data)
            return redirect('/user_list')
        else:
            return render(request, "FormTest/user_edit.html", {"obj": obj, "nid": nid})


def user_del(request):
    # 删除用户
    if request.method=='GET':
        nid = request.GET.get("nid")
        UserInfo.objects.filter(id=nid).delete()
    return redirect("/user_list")
FormTest 
"""StudyForm URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from App01.Views import FormTest

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^user_list', FormTest.user_list),
    url(r'^user_add', FormTest.user_add),
    url(r'^user_edit-(\d+)', FormTest.user_edit),
    url(r'^user_del', FormTest.user_del),
]
urls

　　4：HTML页面　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="/user_add">添加</a>
<table id="tbStudentsList" class="table table-hover table-bordered">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for row in obj %}
        <tr nid="{{ row.id }}">
            <td>{{ row.id }}</td>
            <td>{{ row.username }}</td>
            <td>{{ row.email }}</td>
            <td>
                <a href="user_edit-{{ row.id }}">修改</a>
                |
                <a href="user_del?nid={{ row.id }}">删除</a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</body>
</html>
user_list.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="/user_add/" method="post" novalidate>
    {% csrf_token %}
    <p>{{ obj.username }}{{ obj.errors.username.0 }}</p>
    <p>{{ obj.email }}{{ obj.errors.email.0 }}</p>
    <input type="submit" value="提交"/>
</form>
</body>
</html>
user_add.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="/user_edit-{{ nid }}/" method="post" novalidate>
    {% csrf_token %}
    <p>{{ obj.username }}{{ obj.errors.username.0 }}</p>
    <p>{{ obj.email }}{{ obj.errors.email.0 }}</p>
    <input type="submit" value="提交"/>
</form>
</body>
</html>
user_edit

三种ajax请求（jQuery封装后的ajax+原生的ajax+伪ajax（form+iframe））

"""StudyForm URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from App01.Views import FormTest,UploadTest,AjaxTest

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^user_list', FormTest.user_list),
    url(r'^user_add', FormTest.user_add),
    url(r'^user_edit-(\d+)', FormTest.user_edit),
    url(r'^user_del', FormTest.user_del),
    # 文件上传
    url(r'^upload.html$', UploadTest.upload),

    #Ajax练习
    # 一、普通的form提交+jQuery封装后的Ajax
    url(r'^ajax1.html$', AjaxTest.ajax1),
    url(r'^ajax11.html$', AjaxTest.ajax11),
    #二、原生态的Ajax
    url(r'^ajax2.html$', AjaxTest.ajax2),
    #三、伪Ajax（form+iframe）
    url(r'^ajax3.html$', AjaxTest.ajax3),
    # 文件上传
    url(r'^ajaxUpload$', AjaxTest.ajaxUpload),
]
url 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
{% csrf_token %}

<form action="ajax1.html" method="post">
    <input type="text" id="ajaxText" name="ajaxText" placeholder="请输入测试数据" value="{{ qMethod }}">
    <input type="submit" value="普通提交">
    <br/>
    <input type="button" value="JQuery封装ajaxGET提交" onclick="ajax1Get()">
    <input type="button" value="JQuery封装ajaxPOST提交" onclick="ajax1Post()">
    <br/>
    <input type="button" value="原生的ajaxGET提交" onclick="nativeAjax1Get()">
    <input type="button" value="原生的ajaxPOST提交" onclick="nativeAjax1Post()">
    <br/>

</form>
<iframe id="iframe" name="ifra"></iframe>
<form id="fm" action="/ajax3.html" method="POST" target="ifra">
    <input type="text" id="aText" name="aText" placeholder="请输入测试数据" value="{{ qMethod }}">
    <input type="button" value="伪ajaxPOST提交" onclick="fakeAjax1Post()">
    <br/>
</form>
<hr/>

<iframe id="uploadFR" name="uploadFR" style="display: none"></iframe>
<form id="uploadFM" name="uploadFM" method="post" action="ajaxUpload" enctype="multipart/form-data" target="uploadFR">
    <input type="file" id="img" name="val">
    <input type="button" value="通过ajax+formData上传" onclick="upload1()">
    <input type="button" value="通过原生xhr+formData上传" onclick="upload2()">
    <input type="button" value="伪ajax上传" onclick="upload3()">
</form>
<script>
    function ajax1Get() {
        {#jQuery封装后的ajax-get#}
        var st = $("#ajaxText").val();
        var soft = {'ajaxTest': st}
        $.ajax({
            url: 'ajax11.html',
            type: 'GET',
            dataType: 'json',
            data: soft,
            success: function (arg) {
                alert(arg.data)
            }
        })
    }

    function ajax1Post() {
        {#jQuery封装后的ajax-post#}
        var st = $("#ajaxText").val();
        $.ajax({
            url: 'ajax11.html',
            type: 'POST',
            dataType: 'json',
            data: {"ajaxTest": st},
            success: function (arg) {
                alert(arg.data)
            }
        })
    }

    function nativeAjax1Get() {
        {#1:创建对象#}
        var xhr = new XMLHttpRequest()
        {#2:创建句柄对象#}
        xhr.onreadystatechange = function () {
            {#4LoadedHTTP 响应已经完全接收。#}
            if (xhr.readyState == 4) {
                alert(xhr.responseText)
            }
        }
        {#3:设置请求方式，指定url路径#}
        var st = $("#ajaxText").val();
        xhr.open("GET", "ajax2.html?ajaxTest=" + st)
        {#4:发送#}
        xhr.send()
    }

    function nativeAjax1Post() {
        {#1:创建对象#}
        var xhr = new XMLHttpRequest()
        {#2:创建句柄对象#}
        xhr.onreadystatechange = function () {
            {#4LoadedHTTP 响应已经完全接收。#}
            if (xhr.readyState == 4) {
                alert(xhr.responseText)
            }
        }
        {#3:设置请求方式，指定url路径#}
        var st = $("#ajaxText").val();
        xhr.open("POST", "ajax2.html")
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        {#4:发送#}
        xhr.send("ajaxTest=" + st)
    }

    function fakeAjax1Post() {
        document.getElementById("iframe").onload = reloadIframe;
        var form1 = document.getElementById('fm');
        form1.submit();
    }

    function reloadIframe() {
        var countent = this.contentWindow.document.body.innerHTML
        var obj = JSON.parse(countent)
        if (obj.status) {
            alert(obj.message)
        }
    }

    function upload1() {
        var dataForm = new FormData()
        dataForm.append("val", document.getElementById("img").files[0])
        $.ajax({
            url: "ajaxUpload",
            type: "POST",
            data: dataForm,
            success: function (arg) {
                alert("ajax上传文件成功")
            },
            processData: false,  // tell jQuery not to process the data
            contentType: false  // tell jQuery not to set contentType
        })
    }

    function upload2() {
        var dataForm = new FormData()
        dataForm.append("val", document.getElementById("img").files[0])

        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            {#4LoadedHTTP 响应已经完全接收。#}
            if (xhr.readyState == 4) {
                alert("原生ajax上传文件成功")
            }
        }
        xhr.open("POST", "ajaxUpload")
        xhr.send(dataForm)
    }

    function upload3(){
        document.getElementById("uploadFR").onload=reloadIframe
        var form1 = document.getElementById('uploadFM');
        form1.submit();
    }

</script>
</body>
</html>
html 
from django.shortcuts import HttpResponse,render
import os,uuid

import json
def ajax1(request):
    if request.method=="GET":
        QMethod='普通的get请求'
        return render(request,"AjaxTest/ajax1.html",{"qMethod":QMethod})
    else:
        QMethod = '普通的Post请求------'+request.POST.get("ajaxText")
        return render(request,"AjaxTest/ajax1.html",{"qMethod":QMethod})
def ajax11(request):
    if request.method=="GET":
        QMethod = 'Ajax的get请求------' + request.GET.get("ajaxTest")
        ret = {'status': True, 'data': QMethod, 'message': QMethod}
        return HttpResponse(json.dumps(ret))
    else:
        QMethod = 'Ajax的Post请求------'+ request.POST.get("ajaxTest")
        ret = {'status': True, 'data': QMethod, 'message': QMethod}
        return HttpResponse(json.dumps(ret))

def ajax2(request):
    if request.method=="GET":
        QMethod="原生的Ajax的get请求-----"+request.GET.get("ajaxTest")
        return HttpResponse(QMethod)
    else:
        QMethod = "原生的Ajax的post请求-----" + request.POST.get("ajaxTest")
        return HttpResponse(QMethod)

def ajax3(request):
    if request.method == "GET":
        QMethod = '伪Ajax的get请求------' + request.GET.get("aText")
        ret = {'status': True, 'data': QMethod, 'message': QMethod}
        return render(request, "AjaxTest/ajax1.html", {"qMethod": QMethod})
    else:
        QMethod = '伪Ajax的Post请求------'+request.POST.get("aText")
        ret = {'status': True, 'data': QMethod, 'message': QMethod}
        return HttpResponse(json.dumps(ret))

def ajaxUpload(request):
     # 通过uuid获取到自动编号，防止重复
    nid = str(uuid.uuid4())
    # 通过request获取上传对象
    obj=request.FILES.get("val")
    # 写文件
    file_path=os.path.join("static/files",nid+obj.name)
    f = open(file_path,'wb')
    for line in obj.chunks():
        f.write(line)
    f.close()
    ret = {'status': True, 'data': None, 'message': None}
    ret["data"]=file_path
    #返回
    return HttpResponse(json.dumps(ret))
view

 附件上传

from django.shortcuts import render, redirect, HttpResponse

def upload(request):
    if request.method=="GET":
        return render(request, 'UploadTest/upload.html')
    else:
        user = request.POST.get("user")
        img=request.FILES.get('img')
        f=open(img.name,'wb')
        for line  in img.chunks():
            f.write(line)
        f.close()
        return render(request, 'UploadTest/upload.html')
文件下载1.0 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="upload.html" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="user"/>
    <div style="position: relative">
        <a>上传</a>
        <input type="file" name="img" style="opacity: 0;position:absolute;top:0;left: 0;"/>
    </div>
    <input type="submit" value="提交"/>
</form>
</body>
</html>
文件下载1.0html

与 三种ajax请求相似，同样存在三种附件上传（代码内容已包含在里面）

 Jsonp 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="jsonp测试" onclick="submitJsonp()"/>
<script>
    function submitJsonp() {
        $.ajax({
            {#江西卫视的jsonp只能使用固定的callback函数list()#}
            {#url: "http://www.jxntv.cn/data/jmd-jxtv2.html",#}
            url: "https://sug.so.360.cn/suggest",
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'func',
        })
    }

    function func(arg) {
       alert("可自定义jsonpCallback的函数函数名称")
    }

</script>
</body>

</html>
html 
from django.shortcuts import HttpResponse,render

def jsonp(request):
    print(1111)
    return render(request, "JsonpTest/jsonp.html", {"qMethod": "123456"})
view

猜你喜欢

转载自www.cnblogs.com/YK2012/p/10325736.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022