Django Form form AJAX application (top)

Tag: Ajax Django Forms

I. Description of the project

Learning the Django version of 1.8.2, integrating the knowledge of previously scattered learning, mainly involves:

Project start, AJAX data invocation, registration, data entry, data modification, data deletion, data modeling and so on complete a complete front and back function simple web. Database default with SQLite

1. Create Djano Project:

$CD/data1/djangoproject/$django-admin startproject School $cd School $python manage.py startapp student $MK Dir template static

Open school project structure with Pycharm

650) this.width=650; "title=" Struct.png "alt=" Wkiol1mn1noskysvaaaneq3iob4514.png "src=" Https://s4.51cto.com/wyfs02 /m01/a4/4b/wkiol1mn1noskysvaaaneq3iob4514.png "/>

2. Basic Configuration

$CD/data1/djangoproject/school/school

$vim settings.py

Add 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 "/>

Modify Template path

650) this.width=650; "title=" 2.png "style=" Float:none; "alt=" Wkiom1mn1eyzsornaaaeyytsome192.png "src=" https:// S2.51cto.com/wyfs02/m02/05/9a/wkiom1mn1eyzsornaaaeyytsome192.png "/>

Modify the static path

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. Database (SQLite) Modeling:

The new models.py content in the student directory is as follows:

#coding: Utf-8from django.db import models# Create your models Here.class Student (models. Model): name = models. Charfield (max_length=32,verbose_name= "name") Gender = models. Charfield (max_length=16, verbose_name= "gender") Age = models. Integerfield (verbose_name= "age") Birthday = models. Datefield (verbose_name= "Birthday") Grade = models. Charfield (max_length=32, verbose_name= "grade") Subject = models. Charfield (max_length=32, verbose_name= "professional") City = models. Charfield (max_length=32, verbose_name= "City")

4. Synchronizing the database

$/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 "/>

Second, complete the registration function register.html

1. Form form definition:

Create form.py content under the Student app directory as follows:

#coding: Utf-8from django import formsclass studentform (forms. Form):     name = forms. Charfield (max_length=32,label= "name", Widget=forms. Timeinput (attrs = {"class": "Form-contorl"}))     gender = forms. Charfield (max_length=16, label= "Sex", widget=forms. Timeinput (attrs = {"class": "Form-contorl"}))     age = forms. Integerfield (label= "age", widget=forms. Timeinput (attrs = {"class": "Form-contorl"})      #required  = false   indicates that an empty     birthday = forms is available. Datefield (label= "Birthday", widget=forms. Timeinput (attrs = {"class": "Form-contorl"}), Required=false)     grade =  forms. Charfield (max_length=32, label= "Grade", widget=forms. Timeinput (attrs = {"class": "Form-contorl"}))     subject = forms. Charfield (max_length=32, label= "professional", widget=Forms. Timeinput (attrs = {"class": "Form-contorl"}))     city = forms. Charfield (max_length=32, label= "City", Widget=forms. Timeinput (attrs = {"class": "Form-contorl"})                 def clean_name (self):   # #函数名必须是clear_上面的字段   Fixed format          name = self.cleaned_data["Name"]         if name[0].isalpha ():             return name        else:             raise forms. ValidationError ("The first  must be character.")

2, Simple register.html

Creation of register.html in the template directory can be empty initially

3. Create videos and routes for REGISTER.HMTL

The contents of the Register view function defined in view views.py are as follows:

#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, "regist Er.html ", locals ())

Add content in/data1/djangoproject/school/school/urls.py such as:

650) this.width=650; "title=" 2.png "alt=" Wkiom1mn24yaigjgaaabymtokyg558.png "src=" https://s1.51cto.com/wyfs02/M00/ 05/9b/wkiom1mn24yaigjgaaabymtokyg558.png "/>

Open Project Access: Http://127.0.0.1:8000/register get a blank page

Third, Perfect register.html

1. Create a CSS directory in the/data1/djangoproject/school/static/directory to put the BOOTSTRAP.MIN.CSS

JS directory into the Jquery-3.1.1.min.js vue.min.js img Directory has two pictures, directory structure:

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

Above content master to http://down.51cto.com/data/2334389 download

2. register.html Web Content

<! Doctype html>
 3, modify the Register view function in views.py 
 
#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         #获取验证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值限制必须以字符开头, function fixed format 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)

Iv. Access Verification
Open browser Access http://172.16.3.140:8000/register/Add a few test data
650) this.width=650; "title=" 11.png "alt=" Wkiom1mn32viodfjaafj8bdoqya498.png "src=" https://s4.51cto.com/wyfs02/M02 /05/9b/wkiom1mn32viodfjaafj8bdoqya498.png "/>
Similar to adding a few after the open SQLite database data as follows:
650) this.width=650; "title=" 44444.png "alt=" Wkiol1mn4botwikoaadkbv9adxy434.png "src=" https://s4.51cto.com/wyfs02/ M02/a4/4c/wkiol1mn4botwikoaadkbv9adxy434.png "/>

2. Verify the existence of Ajax's focus move request validation for name
Open Browser F12 debugging function
By first entering the San again, the mouse will see that we have a SAN in the console
650) this.width=650; "title=" 55.png "alt=" Wkiom1mn4obb3gwnaagmjfdrn1u663.png "src=" https://s4.51cto.com/wyfs02/M02 /05/9b/wkiom1mn4obb3gwnaagmjfdrn1u663.png "/>
Change to a different user name such as ling520
650) this.width=650; "title=" 666666.png "alt=" Wkiom1mn4d7cpnxgaadl7dyxaum889.png "src=" Https://s4.51cto.com/wyfs02 /m02/05/9b/wkiom1mn4d7cpnxgaadl7dyxaum889.png "/>

To this one with the SQLite database with the Django registration page through the completion of AJAX verification function, and other content to follow up.
This article is from the "Learning, learning" blog, please be sure to keep this source http://dyc2005.blog.51cto.com/270872/1961496
Django Form form AJAX application (top)