备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Django表单form ajax简单应用

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

一、项目说明

       学习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        #获取验证过的数据
             s  =  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，如需转载请自行联系原作者
文章标签：
数据库
Web App开发
前端开发
Python
JavaScript
关键词：
Django应用
Django Form
ajax应用
ajax.js django
Django ajax
余二五
目录
相关文章
傻啦嘿哟
|
1月前
|
数据库 开发者 UED
如何使用Django的Form组件
如何使用Django的Form组件
傻啦嘿哟
24 0
2019ab
|
1月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
2019ab
26 0
jcLee95
|
3月前
|
前端开发 JavaScript Python
Django 模板中使用 Ajax POST
Django 模板中使用 Ajax POST
jcLee95
17 0
simplify0
|
3月前
|
前端开发 开发者 Python
django表单
django表单
simplify0
26 0
雷霆半月斩掉你的板砖
|
3月前
|
设计模式 开发框架 前端开发
ajax应用设计模式,Ajax设计模式下Web开发的研究与应用
ajax应用设计模式,Ajax设计模式下Web开发的研究与应用
雷霆半月斩掉你的板砖
13 0
zrblue
|
3月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
zrblue
41 0
IT从业者张某某
|
4月前
|
JSON 前端开发 JavaScript
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求
IT从业者张某某
26 0
Django实践-04静态资源和Ajax请求
瑞崽崽崽
|
4月前
|
JSON 前端开发 JavaScript
前端知识笔记（三十七）———Django与Ajax
前端知识笔记（三十七）———Django与Ajax
瑞崽崽崽
27 0
贰零壹玖.
|
4月前
|
JSON 前端开发 JavaScript
前端知识笔记（二）———Django与Ajax
前端知识笔记（二）———Django与Ajax
贰零壹玖.
26 0
海拥
|
4月前
|
JSON 安全 数据库
在 Django 中呈现 HTML 表单（GET 和 POST）
在 Django 中呈现 HTML 表单（GET 和 POST）
海拥
38 0