开发者社区> 余二五> 正文

Django表单form ajax简单应用

简介:
+关注继续查看

一、项目说明

       学习django版本1.8.2,把之前零散学习的知识整合下,主要涉及到:

项目开始,ajax数据调用,注册,数据录入,数据修改,数据删除,数据建模等完成一个完整的前后台功能简单的web。数据库默认用sqlite

1、创建djano项目:

1
2
3
4
5
    $cd  /data1/DjangoProject/
    $django-admin startproject School
    $cd School
    $python manage.py startapp student
    $mkdir template static

    用pycharm打开School项目结构如图:

wKioL1mn1NOSkYSvAAAneq3Iob4514.png

    2、基础配置

    $cd  /data1/DjangoProject/School/School

    $vim settings.py

    添加App student  如图:

wKioL1mn1dHDIl_fAAAkge5FoII062.png

    修改template路径 如图:

wKiom1mn1eyzSornAAAeyyTsOmE192.png

    修改static 路径 如图:

wKioL1mn1eDTWtWSAAAM0EYgcgk963.png


 3、数据库(sqlite)建模:

    在student目录下新建 models.py内容如下:

    

1
2
3
4
5
6
7
8
9
10
11
#coding:utf-8
from django.db import models
# Create your models here.
class Student(models.Model):
    name = models.CharField(max_length=32,verbose_name="姓名")
    Gender = models.CharField(max_length=16, verbose_name="性别")
    Age = models.IntegerField(verbose_name="年龄")
    Birthday = models.DateField(verbose_name="生日")
    Grade = models.CharField(max_length=32, verbose_name="年级")
    subject = models.CharField(max_length=32, verbose_name="专业")
    city = models.CharField(max_length=32, verbose_name="城市")

    4、同步数据库

    $/data1/DjangoProject/School

    $python manage.py validate    如图:

    

wKioL1mn2S3BdykeAAAX1gt5MZE862.png

    $python manage.py makemigrations  如图:

wKioL1mn2S7xw9eLAAALlwLdxXs758.png

    $python manage.py syncdb   如图:

wKiom1mn2UeSHGQIAAAjj__sdFg623.png


二、完成注册功能register.html

    1、form表单定义:

    在student app目录下创建form.py 内容如下:

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#coding:utf-8
from django import forms
class StudentForm(forms.Form):
    name = forms.CharField(max_length=32,label="姓名",widget=forms.TimeInput(attrs = {"class":"form-contorl"}))
    Gender = forms.CharField(max_length=16, label="性别",widget=forms.TimeInput(attrs = {"class":"form-contorl"}))
    Age = forms.IntegerField(label="年龄",widget=forms.TimeInput(attrs = {"class":"form-contorl"}))
    #required = False 表示可为空
    Birthday = forms.DateField(label="生日",widget=forms.TimeInput(attrs = {"class":"form-contorl"}),required=False)
    Grade = forms.CharField(max_length=32, label="年级",widget=forms.TimeInput(attrs = {"class":"form-contorl"}))
    subject = forms.CharField(max_length=32, label="专业",widget=forms.TimeInput(attrs = {"class":"form-contorl"}))
    city = forms.CharField(max_length=32, label="城市",widget=forms.TimeInput(attrs = {"class":"form-contorl"}))
     
     
       def clean_name(self):  ##函数名必须是clear_上面的字段 固定格式
        name = self.cleaned_data["name"]
        if name[0].isalpha():
            return name
        else:
            raise forms.ValidationError("The first  must be character.")

   

     2、简单register.html

        在template目录创建register.html刚开始内容可为空


    3、为register.hmtl创建视频和路由

        视图views.py中定义register视图函数内容如下:        

1
2
3
4
5
6
7
8
#coding:utf-8
from models import Student
from form import StudentForm
from django.shortcuts import render
from django.shortcuts import render_to_response
# Create your views here.
def register(request):
    return render(request,"register.html",locals())

       在/data1/DjangoProject/School/School/urls.py中添加 内容如下图:

    wKiom1mn24yAIgJGAAAbYmtokYg558.png


开启项目访问:http://127.0.0.1:8000/register  得到一个空白页


三、完善register.html

 1、在/data1/DjangoProject/School/static/目录下分别创建 css目录放入bootstrap.min.css

js目录放入jquery-3.1.1.min.js  vue.min.js img目录中有两张图片, 目录结构如图:

wKiom1mn3WeS0P68AAA42FIB7u4683.png

以上内容主到http://down.51cto.com/data/2334389下载

2、register.html网页内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css">
    }
</head>
<body background="/static/img/bg2.png">
 
<h1 style="text-align: center;color:white" >
    Student Register
    <hr/>
</h1>
    <form class="form-inline" style="text-align: center" method="post">
        {% csrf_token %}    <!-- post方法csrf 标识 -->
        {{ sForm.as_p }}
        <input class="form-control" type="submit" value="注册">
    </form>
    <!--ajax 表单验证用户名-->
    <script>
     
        $(
            function () {
                $("#id_name").blur(
                    function () {
                        var name = $("#id_name").val()
                        $.ajax(
                            {
                                url:"/valide_name/",
                                type:"get",
                                data:{"name":name},
                                success:function (data) {
                          //          $("#id_name").val("name is exsit")
                                    console.log(data)
                                },
                                error:function (err) {
                                   console.log(err)
                                }
                            }
                        )
                    }
                )
            }
        )
    </script>
</body>
</html>

3、修改views.py中的register视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#coding:utf-8
from models import Student
from form import StudentForm
from django.http import JsonResponse
from django.shortcuts import render
from django.shortcuts import render_to_response
# Create your views here.
def register(request):
    if request.method == "POST" and request.POST: #判断提交的数据方式是Post并且有数据
        sForm = StudentForm(request.POST)         #将post数据交给form表单进行验证
        if sForm.is_valid():                      #判断form表单提交的数据是否正确
            clean_data = sForm.cleaned_data       #获取验证过的数据
            = Student()
            s.name = clean_data["name"]
            s.Gender = clean_data["Gender"]
            s.Age = clean_data["Age"]
            s.Birthday = clean_data["Birthday"]
            s.Grade = clean_data["Grade"]
            s.subject = clean_data["subject"]
            s.city = clean_data["city"]
            s.save()
        else:
            pass
    else:
        sForm = StudentForm()
    return render(request,"register.html",locals())
 
#对name值限制必须以字符开头,函数固定格式valide_field
def valide_name(request):
    if request.method == "GET" and request.GET:
        name = request.GET['name']
        if Student.objects.filter(name=name):
#        if name == id_name:
            name = "we have a %s" % name
        else:
            name = name
    else:
        name = "No name"
    result = {"data":name}
    return JsonResponse(result)


四、访问验证

打开浏览器访问http://172.16.3.140:8000/register/如图:添加几条测试数据

wKiom1mn32viodfjAAFJ8BdOQyA498.png 

类似添加完几条后打开sqlite数据库数据如下:

wKioL1mn4BOTwIkoAADkBV9AdxY434.png


2、验证ajax对name的焦点移开请求验证是否存在

打开浏览器F12调试功能

先再次输入san 移开鼠标 会看到console中出现we have san 如图:

wKiom1mn4ObB3gWnAAGmjFDRn1U663.png

换成其他的用户名如 ling520如图:

wKiom1mn4d7CPNxgAADl7dyxauM889.png


到此一个带sqlite数据库 结合django 的注册页面 通过 ajax完成验证功能完成,其他内容后续补充。










本文转自 dyc2005 51CTO博客,原文链接:http://blog.51cto.com/dyc2005/1961496,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Django】当大型项目采用Django框架对于QueryDict以及模板的表单在Admin 管理工具的使用
【Django】当大型项目采用Django框架对于QueryDict以及模板的表单在Admin 管理工具的使用
67 0
Django(4)表单
Django(4)表单
53 0
Django 表单
Django 表单
1453 0
Django中ajax技术和form表单两种方式向后端提交文件
一、Form表单方式提交: form表单提交文件或者图像时需要对form中的属性进行如下设置: 1、method="post" //提交方式 post 2、enctype="multipart/form-data" //不对字符编码。
1751 0
Django学习(四)表单,让数据库更强大
  表单,在HTML中的标签为,在网页中主要负责数据采集功能。我们在浏览网站时,常常会碰到注册账号、账号登录等,这就是表单的典型应用。
1596 0
+关注
余二五
文章
问答
视频
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载