Django表單form ajax應用(上)
一、項目說明
學習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項目結構如圖:
2、基礎配置
$cd /data1/DjangoProject/School/School
$vim settings.py
添加App student 如圖:
修改template路徑 如圖:
修改static 路徑 如圖:
3、數據庫(sqlite)建模:
在student目錄下新建 models.py內容如下:
#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 如圖:
$python manage.py makemigrations 如圖:
$python manage.py syncdb 如圖:
二、完成註冊功能register.html
1、form表單定義:
在student app目錄下創建form.py 內容如下:
#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視圖函數內容如下:
#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中添加 內容如下圖:
開啟項目訪問: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目錄中有兩張圖片, 目錄結構如圖:
以上內容主到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-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/如圖:添加幾條測試數據
類似添加完幾條後打開sqlite數據庫數據如下:
2、驗證ajax對name的焦點移開請求驗證是否存在
打開瀏覽器F12調試功能
先再次輸入san 移開鼠標 會看到console中出現we have san 如圖:
換成其他的用戶名如 ling520如圖:
到此一個帶sqlite數據庫 結合django 的註冊頁面 通過 ajax完成驗證功能完成,其他內容後續補充。
本文出自 “學無止境,學以致用” 博客,請務必保留此出處http://dyc2005.blog.51cto.com/270872/1961496
Django表單form ajax應用(上)