django 中form在html中的簡單使用

HTTP協議以"請求-回覆"的方式工作。客戶發送請求時,可以在請求中附加數據。服務器通過解析請求,就可以獲得客戶傳來的數據,並根據URL來提供特定的服務,form也是這樣的方式來運行的。

Form的驗證思路
前端:form表單
後臺:創建form類,當請求到來時,先匹配,匹配出正確和錯誤信息。

步驟一、

        創建Django項目和應用以後,在項目目錄裏面創建templates目錄,然後再在templates目錄裏面創建應用目錄formApp,配置setting文件,寫入模板的尋找路徑

圖片.png


步驟二、


        然後再templates下面的formApp裏面創建form_page.html  文件內容如下:定義了兩個表單,一個get,一個post的表單

圖片.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form_page</title>
</head>
<body>
<form action="/formApp/form_get/" method="get">
    <input type="text" name="txt">
    <input type="submit" value="get提交">
</form>
<br>
<form action="/formApp/form_post/" method="post">
    {% csrf_token %}
    <input type="text" name="txt">
    <input type="submit" value="post提交">
</form>
<p>{{ data }}</p>
</body>
</html>

步驟三、編寫視圖文件views

圖片.png

from django.shortcuts import render
from django.http import JsonResponse,HttpResponse
# Create your views here.

def form_page(request):
    return render(request,'formApp/form_page.html')

def form_get(request):
    request.encoding='utf-8'

    if 'txt' in request.GET:
        message = '您輸入的內容是:' + request.GET['txt']
    else:
        message = '您提交了空的表單'

    return HttpResponse(message)

def form_post(request):
    context = {}
    if request.POST:
        context['data'] = request.POST['txt']

    return render(request,'formApp/form_page.html',context)

步驟四、編寫項目下的路由文件urls,讓他去找應用下面的路由文件urls

圖片.png

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^myapp1/', include("myapp1.urls")),
    url(r'^formApp/', include("formApp.urls"),name='formApp'),
    url(r'^tinymce/',include('tinymce.urls'))
]

步驟五、編寫應用下面的路由文件urls

圖片.png

from django.conf.urls import url
from formApp.views import *

urlpatterns = [
    url(r'^form_page/',form_page),
    url(r'^form_get/',form_get),
    url(r'^form_post/',form_post),
]

步驟五、啓動Django,檢驗成果:

    Django啓動之後在瀏覽器上輸入http://127.0.0.1:8000/formApp/form_post/

圖片.png

formtest.gif

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章