Django表單form ajax應用(上)

標籤：ajax   django   表單   

一、項目說明

       學習django版本1.8.2,把之前零散學習的知識整合下，主要涉及到：

項目開始，ajax資料調用，註冊，資料錄入，資料修改，資料刪除，資料建模等完成一個完整的前後台功能簡單的web。資料庫預設用sqlite

1、建立djano項目：

    $cd  /data1/DjangoProject/    $django-admin startproject School    $cd School    $python manage.py startapp student    $mkdir template static

    用pycharm開啟School項目結構

650) this.width=650;" title="struct.png" alt="wKioL1mn1NOSkYSvAAAneq3Iob4514.png" src="https://s4.51cto.com/wyfs02/M01/A4/4B/wKioL1mn1NOSkYSvAAAneq3Iob4514.png" />

    2、基礎配置

    $cd  /data1/DjangoProject/School/School

    $vim settings.py

    添加App student 

650) this.width=650;" title="1.png" style="float:none;" alt="wKioL1mn1dHDIl_fAAAkge5FoII062.png" src="https://s1.51cto.com/wyfs02/M00/A4/4B/wKioL1mn1dHDIl_fAAAkge5FoII062.png" />

    修改template路徑

650) this.width=650;" title="2.png" style="float:none;" alt="wKiom1mn1eyzSornAAAeyyTsOmE192.png" src="https://s2.51cto.com/wyfs02/M02/05/9A/wKiom1mn1eyzSornAAAeyyTsOmE192.png" />

    修改static 路徑

650) this.width=650;" title="4.png" style="float:none;" alt="wKioL1mn1eDTWtWSAAAM0EYgcgk963.png" src="https://s4.51cto.com/wyfs02/M02/A4/4B/wKioL1mn1eDTWtWSAAAM0EYgcgk963.png" />

 3、資料庫(sqlite)建模：

    在student目錄下建立 models.py內容如下：

    

#coding:utf-8from 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   

    

650) this.width=650;" title="1.png" style="float:none;" alt="wKioL1mn2S3BdykeAAAX1gt5MZE862.png" src="https://s5.51cto.com/wyfs02/M01/A4/4B/wKioL1mn2S3BdykeAAAX1gt5MZE862.png" />

    $python manage.py makemigrations 

650) this.width=650;" title="2.png" style="float:none;" alt="wKioL1mn2S7xw9eLAAALlwLdxXs758.png" src="https://s4.51cto.com/wyfs02/M02/A4/4B/wKioL1mn2S7xw9eLAAALlwLdxXs758.png" />

    $python manage.py syncdb  

650) this.width=650;" title="3.png" style="float:none;" alt="wKiom1mn2UeSHGQIAAAjj__sdFg623.png" src="https://s4.51cto.com/wyfs02/M00/05/9A/wKiom1mn2UeSHGQIAAAjj__sdFg623.png" />

二、完成註冊功能register.html

    1、form表單定義：

    在student app目錄下建立form.py 內容如下:

    

#coding:utf-8from django import formsclass 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視圖函數內容如下:        

#coding:utf-8from models import Studentfrom form import StudentFormfrom django.shortcuts import renderfrom 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中添加 內容如：

    650) this.width=650;" title="2.png" alt="wKiom1mn24yAIgJGAAAbYmtokYg558.png" src="https://s1.51cto.com/wyfs02/M00/05/9B/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目錄中有兩張圖片， 目錄結構:

650) this.width=650;" title="1.png" alt="wKiom1mn3WeS0P68AAA42FIB7u4683.png" src="https://s3.51cto.com/wyfs02/M00/05/9B/wKiom1mn3WeS0P68AAA42FIB7u4683.png" />

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

2、register.html網頁內容

<!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視圖函數

#coding:utf-8from models import Studentfrom form import StudentFormfrom django.http import JsonResponsefrom django.shortcuts import renderfrom 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_fielddef 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/添加幾條測試資料

650) this.width=650;" title="11.png" alt="wKiom1mn32viodfjAAFJ8BdOQyA498.png" src="https://s4.51cto.com/wyfs02/M02/05/9B/wKiom1mn32viodfjAAFJ8BdOQyA498.png" /> 

類似添加完幾條後開啟sqlite資料庫資料如下：

650) this.width=650;" title="44444.png" alt="wKioL1mn4BOTwIkoAADkBV9AdxY434.png" src="https://s4.51cto.com/wyfs02/M02/A4/4C/wKioL1mn4BOTwIkoAADkBV9AdxY434.png" />

2、驗證ajax對name的焦點移開請求驗證是否存在

開啟瀏覽器F12調試功能

先再次輸入san 移開滑鼠 會看到console中出現we have san 

650) this.width=650;" title="55.png" alt="wKiom1mn4ObB3gWnAAGmjFDRn1U663.png" src="https://s4.51cto.com/wyfs02/M02/05/9B/wKiom1mn4ObB3gWnAAGmjFDRn1U663.png" />

換成其他的使用者名稱如 ling520

650) this.width=650;" title="666666.png" alt="wKiom1mn4d7CPNxgAADl7dyxauM889.png" src="https://s4.51cto.com/wyfs02/M02/05/9B/wKiom1mn4d7CPNxgAADl7dyxauM889.png" />

到此一個帶sqlite資料庫 結合django 的註冊頁面 通過 ajax完成驗證功能完成，其他內容後續補充。

本文出自 “學無止境,學以致用” 部落格，請務必保留此出處http://dyc2005.blog.51cto.com/270872/1961496

Django表單form ajax應用(上)