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

猜你喜欢

转载自blog.51cto.com/853056088/2314388
今日推荐