1. 程式人生 > >django 中form在html中的簡單使用

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