
3.12 HTML表单
HTML表单是客户端与服务器端进行交互的重要方式,在讲解HTML表单之前先进行必要的准备工作。
步骤1:将Choice模型注册到admin网站,修改polls/admin.py。
from django.contrib import admin from .models import Question, Choice
admin.site.register(Question) admin.site.register(Choice)
步骤2:登录admin后台,为问卷添加选项。
单击Add按钮,进入添加问卷选项页面,效果如下图所示。

添加3个选项,效果如下面三幅图所示。


完成准备工作后,继续修改polls/detail.html模板,为其添加HTML表单用于提交信息,新模板如下:

代码分析:
在问卷详情页显示问卷相关选项,并为每一个选项添加单选按钮(radio)。
表单的处理页用url模板标签表示"{% url 'polls:vote' question.id %}",表单以post的方式提交。
forloop.counter标签用于记录循环次数。
由于当前表单使用post方式提交数据,需要防止伪造的跨站点请求,表单中的{% csrf_token %}标签就可以解决这类问题。
接下来创建一个视图来接收并处理表单提交的信息:

代码分析:
request.POST是一个类字典对象,以便通过关键字的名字获取提交的数据。如果表单提交的信息中不存在则抛出KeyError。
信息处理结束后,使用HttpResponseRedirect方法跳转到新的页面以免用户单击浏览器后退按钮导致重新提交表单,这是一个很好的编程习惯。
为了防止在HttpResponseRedirect方法中使用URL硬编码,使用reverse()方法强制调用URL名字并且接收必要参数,而不是直接使用URL。
由于提交问卷后页面会跳转到结果页,因此需要修改results视图:

新建polls/results.html模板并添加以下代码:

好了,到目前为止一个简单的投票系统就做好了,登录网站测试一下。
打开投票系统网址:http://127.0.0.1:8000/polls/,效果如下图所示。

单击问卷链接,效果如下图所示。

选择任意选项,单击“提交”按钮,效果如下图所示。
