Django(part17)--form表单提交数据
学习笔记,仅供参考,有错必纠
form表单
form表单的主要作用是和服务器进行交互,为服务器端提供数据。
- name属性
form表单有name属性,name属性类似于客户端与服务器端之间的约定。
form表单中能使用name属性的标签:
<input>
<select>
<textarea>
form表单提交数据案例
首先,我们新建一个工程mywebsite3:
django-admin startproject mywebsite3
开启服务:
python manage.py runserver
在项目文件夹下,新建一个模板文件夹templates,并更改settgins.py中TEMPLATES列表里的DIRS,设置模板路径:
TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [os.path.join(BASE_DIR, 'templates')],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]
在项目下的mywebsite3文件夹中新建试图模块views.py,并创建本案例所需的视图函数:
# -*- coding: utf-8 -*-from django.http import HttpResponse
from django.shortcuts import renderdef test_form(request):'此视图函数用于示意form表单的提交'if request.method == 'GET':# 返回表单return render(request, 'test_form.html')elif request.method == 'POST':# 返回表单提交内容的结果return HttpResponse("没有结果")
设置路由(urls.py):
from django.contrib import admin
from django.urls import path
from django.urls import re_path
from . import viewsurlpatterns = [path('admin/', admin.site.urls),re_path(r'^test_form/$', views.test_form)
]
test_form.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Yes!</title>
</head>
<body><form><div>兔兔姓名:<input type="text" name="bunnyname"></div><div><input type="submit" value="提交"></div></form></body>
</html>
在这个HTML文档中,我们的form标签没有设定任何属性值,这意味着数据将提交到当前页面,且默认请求方式为GET(method=‘GET’)
向http://127.0.0.1:8000/test_form/发起请求
输入兔兔姓名为Huang,并提交:
可以看到 提交的数据(Huang) 以及input标签的 name属性值(bunnyname) 均以查询参数的方式增加到url中.
现在,我们尝试一下提交表单数据到服务器,首先,我们要在settings.py中把中间键注释掉:
MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware',#'django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',
]
我们更改一下test_form.html,在其中增加3个多选框,设置其name属性为fav,并将其请求方式改变为POST:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Yes!</title>
</head>
<body><form method="POST"><div>兔兔姓名:<input type="text" name="bunnyname"></div><div>兔兔年龄:<input type="text" name="bunnyage"></div><div>兔兔食物:<input type="text" name="bunnyfood"></div>爱好:<input type="checkbox" name="fav" value="吃饭">吃饭 <input type="checkbox" name="fav" value="睡觉">睡觉<input type="checkbox" name="fav" value="舔毛">舔毛<div><input type="submit" value="提交"></div></form></body>
</html>
再更改一下views.py:
def test_form(request):'此视图函数用于示意form表单的提交'if request.method == 'GET':# 返回表单return render(request, 'test_form.html')elif request.method == 'POST':# 返回表单提交内容的结果dic = dict(request.POST)print("提交的内容是:" , dic)html = request.POST.get("bunnyname", "") + "的信息"return HttpResponse(html)
向http://127.0.0.1:8000/test_form/发起请求,并输入数据,点击提交:
得到如下结果:
再看一下我们的cmd界面中的输出:
提交的内容是: {'bunnyname': ['Huang'], 'bunnyage': ['10'], 'bunnyfood': ['兔粮'], 'fav': ['吃饭', '舔毛']}
如果我想获取键"fav"所对应的列表里的全部数据,那么我们可以使用request.POST.getlist()
方法获取:
views.py
def test_form(request):'此视图函数用于示意form表单的提交'if request.method == 'GET':# 返回表单return render(request, 'test_form.html')elif request.method == 'POST':# 返回表单提交内容的结果dic = dict(request.POST)print("提交的内容是:" , dic)fav = request.POST.getlist('fav')print("fav=", fav) html = request.POST.get("bunnyname", "") + "的信息"return HttpResponse(html)
向http://127.0.0.1:8000/test_form/发起请求,并输入数据,点击提交:
cmd中的输出为:
提交的内容是: {'bunnyname': ['Huang'], 'bunnyage': ['10'], 'bunnyfood': ['胡萝卜'], 'fav': ['吃饭', '睡觉', '舔毛']}
fav= ['吃饭', '睡觉', '舔毛']
从结果可知,我们拿到了fav中的列表。
我们在test_form.html中加入一个大文本框,并设置其name属性为note:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Yes!</title>
</head>
<body><form method="POST"><div>兔兔姓名:<input type="text" name="bunnyname"></div><div>兔兔年龄:<input type="text" name="bunnyage"></div><div>兔兔食物:<input type="text" name="bunnyfood"></div>爱好:<input type="checkbox" name="fav" value="吃饭">吃饭 <input type="checkbox" name="fav" value="睡觉">睡觉<input type="checkbox" name="fav" value="舔毛">舔毛<div><textarea rows="10" cols="20" name="note">备注</textarea> </div><div><input type="submit" value="提交"></div></form></body>
</html>
向http://127.0.0.1:8000/test_form/发起请求,并输入数据,点击提交:
看一看cmd中的输出:
提交的内容是: {'bunnyname': ['Huang'], 'bunnyage': ['10'], 'bunnyfood': ['兔粮'], 'fav': ['吃饭', '舔毛'], 'note': ['安徽财经大学\r\n应用统计\t\t']}
fav= ['吃饭', '舔毛']
Django(part17)--form表单提交数据相关推荐
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- form表单提交数据的同时上传文件代码示例
form表单提交数据的同时在表单中上传文件代码示例 一.定义页面 注意:在form表单中加入属性 enctype="multipart/form-data" 表示此表单支持文件上 ...
- form表单提交数据不让跳转办法
form表单提交数据不让跳转办法 应用场景: 1.弹出层 2.需要连续提交多条记录的情况 3.页面多个存在提交事件,需要局部提交情况 方法一:加个return false,阻止表单跳转 <for ...
- element form表单提交数据之后清空所有输入框
element form表单提交数据之后清空所有输入框 首先el-form标签上的ref属性名和调方法名统一,还有要绑定所有表单数据的一个大对象就是 :model属性,然后prop属性绑定的值要和v- ...
- JS动态模拟Form表单提交数据
分享知识 传递快乐 JS动态模拟Form表单提交数据 <!DOCTYPE html> <html lang="en"> <head><m ...
- html 提交form表单提交数据格式,form表单提交数据
form表单提交的几种方法 HTML表单提交的几种方式方式一:通过submit按钮提交方式二:通过一般按钮button提交1/3javascript">functionsubmit1( ...
- html表单数据提交服务器,form表单提交数据到服务器
[TOC] >[success] # form表单提交数据到服务器 ~~~ 下面案例通过'form表单'的方式提交给后台数据,在'index.html'页面'input'中输入内容提交给后台, ...
- form表单提交数据如何拿到返回值
form表单提交数据如何拿到返回值 文章目录 form表单提交数据如何拿到返回值 @[TOC](文章目录) 前言 一.如何拿到返回值 二.在这个过程中也会遇到一些问题 总结 前言 使用form表单提交 ...
- Form表单提交数据的乱码问题
面对多种编码方式,一旦处理不好或者稍有不慎,乱码问题就层出不穷,乱码问题是个巨坑啊~~~ 具体有哪些编码方式,自行百度或者见我写的某一篇博文,里面提到过之所以出现乱码是因为用了不同的码表去解码编码,好 ...
最新文章
- Simple NHibernate Architecture[from]
- 腾讯云AMD服务器8元/月
- 018_html文件路径
- 2021算法竞赛入门班第八节课【数学】习题
- 本地安装 SAP Commerce 实例
- ios如何获取gps坐标(定位第二节)
- ubuntupython连接数据库_Ubuntu中python的mysql操作
- 2017.3.6~2017.3.7 Harry And Magic Box 思考记录(特别不容易)
- ASP.NET MVC 中解决Session,Cookie等依赖的方式
- matlab keras,基于预训练的 Keras 层组合网络
- 小伙用微信小程序的Canvas手撸了一个娃娃机
- 阿里高管的思考方式真正厉害在哪?内部员工7000字深度干货
- Java快速入门到精通—大数字运算(BigDecimal 类)
- 浅谈运维工程师的开发能力的培养
- CAD文件版本怎么转换?如何将高版本转换成低版本?
- 《数据挖掘概念与技术》学习笔记-第二章
- Leetcode 355. 设计推特 C++
- 天涯明月刀7月4号服务器维护,8月4日服务器例行维护公告
- 【A component required a bean of type ‘‘ that could not be found】
- 【雅思】【绿宝书错词本】List37~48
热门文章
- xamarin跳转html,Xamarin 页面跳转
- oracle hr样本模式,Oracle 样本模式 HR
- linux gnome 桌面,GNOME Linux桌面
- extjs 表单设置html5,ExtJS 配置和表格控件使用
- 手机协处理器java,HBase1.x实战:协处理器Java开发实例--ObserverCoprocessor
- java 用于xcopy复制_java调用copy复制子文件夹及文件到指定目录(非xcopy)
- Form 组件动态绑定数据
- 观察+|腾讯网易终获游戏版号,但all in 游戏时代已结束
- Radio / Select 设置 checked 没反应
- JPA mysql wildfly jboss 存储时乱码