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,如需转载请自行联系原作者
目录
相关文章
|
4月前
|
中间件 程序员 开发工具
Django实践-08中间件的应用
Django实践-08中间件的应用
Django实践-08中间件的应用
|
3月前
|
搜索推荐 算法 前端开发
美食物管理与推荐系统Python+Django网站开发+协同过滤推荐算法应用【计算机课设项目推荐】
美食物管理与推荐系统Python+Django网站开发+协同过滤推荐算法应用【计算机课设项目推荐】
89 4
美食物管理与推荐系统Python+Django网站开发+协同过滤推荐算法应用【计算机课设项目推荐】
|
1月前
|
数据库 开发者 UED
如何使用Django的Form组件
如何使用Django的Form组件
24 0
|
1月前
|
安全 数据库 开发工具
Django实战:从零到一构建安全高效的Web应用
Django实战:从零到一构建安全高效的Web应用
39 0
|
1月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
26 0
|
2月前
|
SQL 安全 数据库
利用Django框架构建高效后端应用
【2月更文挑战第9天】在当今互联网时代,后端开发扮演着至关重要的角色。本文将介绍如何利用Django框架构建高效的后端应用,探讨其优势和应用场景,并深入探讨了Django框架的核心特性和功能。
|
2月前
|
数据库 开发者 Python
Python在Web开发中的应用:Flask与Django框架介绍与实践
Python在Web开发中的应用:Flask与Django框架介绍与实践
|
3月前
|
前端开发 JavaScript Python
Django 模板中使用 Ajax POST
Django 模板中使用 Ajax POST
16 0
|
3月前
|
API 索引 Python
Python 教程之 Django(13)使用 Django 的天气应用程序
Python 教程之 Django(13)使用 Django 的天气应用程序
27 0
Python 教程之 Django(13)使用 Django 的天气应用程序
|
3月前
|
API Python
Python 教程之 Django(12)新闻应用程序
Python 教程之 Django(12)新闻应用程序
20 1
Python 教程之 Django(12)新闻应用程序