Python Django Web 框架编程 - 表单 Form
myzbx 2024-12-22 19:43 16 浏览
可以修改一下投票详细页面的模板 ("mysite/templates/detail.html") ,让它包含一个 HTML <form> 元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="{% url 'polls:vote' question.id %}" method="post">
{% csrf_token %}
<fieldset>
<legend><h1>{{ question.question_text }}</h1></legend>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
{% for choice in question.choice_set.all %}
<input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
<label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
{% endfor %}
</fieldset>
<input type="submit" value="Vote">
</form>
</ul>
</body>
</html>
代码说明:
- 上面的模板在 Question 的每个 Choice 前添加一个单选按钮。 每个单选按钮的 value 属性是对应的各个 Choice 的 ID。每个单选按钮的 name 是 "choice" 。这意味着,当有人选择一个单选按钮并提交表单提交时,它将发送一个 POST 数据 choice=# ,其中# 为选择的 Choice 的 ID。这是 HTML 表单的基本概念。
- 将表单的 action 设置为 {% url 'polls:vote' question.id %},并设置 method="post"。使用 method="post" (而不是 method="get" )是非常重要的,因为提交这个表单的行为将改变服务器端的数据。
- forloop.counter 指示 for 标签已经循环多少次。
- 由于创建一个 POST 表单(它具有修改数据的作用),所以需要小心跨站点请求伪造。 但不必太过担心,因为 Django 自带了一个非常有用的防御系统。 简而言之,所有针对内部 URL 的 POST 表单都应该使用 {% csrf_token %} 模板标签。
现在,来创建一个 Django 视图来处理提交的数据。首先需要为投票应用创建了一个 URLconf ,包含这一行:
path('<int:question_id>/vote/', views.vote, name='vote'),
还需要在 polls/views.py 中创建了一个 vote() 函数实现具体的数据库查询代码:
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import get_object_or_404, render
from django.urls import reverse
from .models import Choice, Question
# ...
def vote(request, question_id):
question = get_object_or_404(Question, pk=question_id)
try:
selected_choice = question.choice_set.get(pk=request.POST['choice'])
except (KeyError, Choice.DoesNotExist):
# 刷新form页面
return render(request, 'polls/detail.html', {
'question': question,
'error_message': "You didn't select a choice.",
})
else:
selected_choice.votes += 1
selected_choice.save()
# 在成功处理 POST 数据后,返回一个 HttpResponseRedirect 刷新页面。
return HttpResponseRedirect(reverse('polls:results', args=(question.id,)))
上述代码说明:
- request.POST 是一个类字典对象,让你可以通过关键字的名字获取提交的数据。request.POST['choice'] 以字符串形式返回选择的 Choice 的 ID。 request.POST 的值永远是字符串。
- 注意,Django 还以同样的方式提供 request.GET 用于访问 GET 数据,在代码中显式地使用 request.POST ,以保证数据只能通过 POST 调用改动。
- 如果在 request.POST['choice'] 数据中没有提供 choice ,POST 将引发一个 KeyError 。上面的代码检查 KeyError ,如果没有给出 choice 将重新显示 Question 表单和一个错误信息。
- 在增加 Choice 的得票数之后,代码返回一个 HttpResponseRedirect 而不是常用的 HttpResponse 、 HttpResponseRedirect 只接收一个参数:用户将要被重定向的 URL(请继续看下去,我们将会解释如何构造这个例子中的 URL)。
- 正如上面的 Python 注释指出的,在成功处理 POST 数据后,返回一个 HttpResponseRedirect。
- 在 HttpResponseRedirect 的构造函数中使用 reverse() 函数。这个函数避免了在视图函数中硬编码 URL。它需要给出想要跳转的视图的名字和该视图所对应的 URL 模式中需要给该视图提供的参数。 Django 通过查找设定的 URLconf, reverse() 调用将返回一个这样的字符串:
'/polls/3/results/'
其中 3 是 question.id 的值。重定向的 URL 将调用 'results' 视图来显示最终的页面。
当有人对 Question 进行投票后, vote() 视图将请求重定向到 Question 的结果界面。视图代码如下:
from django.shortcuts import get_object_or_404, render
def results(request, question_id):
question = get_object_or_404(Question, pk=question_id)
return render(request, 'result.html', {'question': question})
相应的需要在 mysite/templates/ 里创建一个 results.html 模板,代码如下:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
<li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
{% endfor %}
</ul>
<a href="{% url 'polls:detail' question.id %}">Vote again?</a>
</ul>
</body>
</html>
在浏览器中访问:http://127.0.0.1:8000/polls/3,然后为 Question 投票。应该看到一个投票结果页面,并且在每次投票之后都会加1。 如果提交时没有选择任何 Choice,应该看到错误信息。
注意:如果在页面中投票时出现错误,请先在代码文件中头部查看,是否都 import 导入了必要的代码包。
相关推荐
- 以文本的方式绘制简单的SVG流程图——flowchart.js
-
介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...
- 全国首套构网型SVG在木垒投运
-
中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...
- Popmotion – 小巧,灵活的 JS 运动引擎
-
Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...
- 零基础教你学前端——43、初识SVG
-
解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...
- 2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF
-
2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...
- vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!
-
前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...
- 一篇文章带你了解SVG 蒙版(Mask)
-
SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...
- SVG实现的流程图绘制
-
一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...
- 解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享
-
前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...
- 交互设计师做好动画后,提交给开发的文档有哪些?
-
谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...
- Motion for Vue:为Vue量身定制的强大动画库
-
在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...
- Web开发人员的福音!8个实用的SVG工具
-
SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...
- 一键画波浪线、一键多图片调色?这3个网站好玩到停不下来
-
作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...
- vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!
-
Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...
- DrawSVG – SVG 路径动画 jQuery 插件
-
jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 基础教程 (29)
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)