Python Django Web 框架编程 - 表

Python Django Web 框架编程 - 表单 Form

以修改一下投票详细页面的模板 ("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 导入了必要的代码包。

在学习异步提交表单之前，先来学习几个JQuery方法和属性。

1、serialize()：序列表格内容为字符串。如下：

queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.title=&queryBean.province=&queryBean.city=&selectID=ad78f509f2bc412fb9fe16e36d227a11&queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.page.intPage=1

2、serializeArray()：序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。

注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。举例来说：

[
 {
 "name": "firstname",
 "value": "Hello"
 },
 {
 "name": "lastname",
 "value": "World"
 },
 {
 "name": "alias"
 }
]

3、data属性：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。

4、dataType属性：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

“xml”: 返回 XML 文档，可用 jQuery 处理。“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了”cache”参数。”’注意：”’在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)。“json”: 返回 JSON 数据。“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。“text”: 返回纯文本字符串

一、ajax方式

<script type="text/javaScript">
　　 $.ajax({
 url:"mobileSurveyAction_addSurvey.action",//提交地址
 data:$("#form1").serialize(),//将表单数据序列化
 type:"POST",
 dataType:"json",
 success:function(result){
 if (result.success=='100'){
 $("#mySection").hide();
 $(".footer").hide();
 $("#alertMsg").show();
 }else{
 alert("失败！");
 }
 }
 });
</script>

二、submit方式

有时在A页面点击按钮弹出一个form表单，在填完表单后提交成功后，需要关闭表单页并将表单中的某些值反应在A页面上，这时就需要异步提交表单。其实也挺简单，只是需要把表单数据序列化。

<script type="text/javaScript">
　　 $("#form1").submit(function (){
　　 var ajax_url="yourActionUrl"; //表单目标
　　 var ajax_type=$(this).attr('method'); //提交方法
　　 var ajax_data=$(this).serialize(); //表单数据
　　 $.ajax({
 　　 type:ajax_type, //表单提交类型
 　　 url:ajax_url, //表单提交目标
 　　 data:ajax_data, //表单数据
 　　 success:function(msg){
 　　 if(msg=='success'){//msg 是后台调用action时，你传过来的参数
 　　 //do things here
 　　 window.close();
 　　 }else{
 //do things here
 　　 }
 　　 }
　　 });
　　 //return false; //止表单的默认提交事件
 });
</script>

三、submit方式2

<html>
<head>
<script type="text/javaScript">
　　 jQuery(document).ready(function (){
　　 jQuery('#search_form').bind("submit", function(){
 　　 var key_word=jQuery("#keyword").val();
 　　 if(key_word==""){
 　　 return false;
 　　 }
 　　 var options={
 　　 url: '/portrait/user_info_display?user_info_keyword=' + key_word,
 　　 type: 'post',
 　　 dataType: 'text',
 　　 data: $("#search_form").serialize(),
 　　 success: function (data) {
 　　 if (data.length > 0){
 　　 jQuery("#user_info").html(data);
 　　 }
 　　 }
 　　 };
 　　 $.ajax(options);
 　　 return false;
　　 });
 　$('#search').click(function(){
 $('#search_form').submit();
 　　 });
　　});
</script>
</head>
<body>
 <form mothod="post" id="search_form">
 <div class="cf">
 <label class="search-bar">
 <input id="keyword" placeholder="请输入搜索关键词" name="user_info_keyword" type="text" value="" class="input-search">
 <a id="search" class="btn-search">
 <i class="icon-search"></i>
 </a>
 <a href="javascript：;" class="btn-more"></a>
 </label>
 </div>
 </form>
</body>
</html>

代码完成了两个功能：1.输入关键词后按回车，会向server发送一个POST请求，然后异步提交表单，刷新部分页面；2.输入关键词后，点击查询按钮，也可异步刷新部分页面。

此时要注意表单提交后发送的是POST请求，而点击按钮会发送一个GET请求，所以我们可以通过jQuery，使得按钮点击时触发表单提交，这样后端就不用再写代码处理GET请求。

四、隐藏的iframe模拟异步上传

为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中，所以才没有使当前页面跳转，感觉就像是异步操作一样。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-">
<title>隐藏的iframe上传文件</title>
<script type="text/javascript" src="jquery路径..."></script>
</head>
<body>
 <iframe name="frm" style="display: none"></iframe>
 <form action="/upload" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);">
 <p id="upfile">
 附件：<input type="file" name="myfile" style="display: inline">
 </p>
 <p id="upbtn">
 <input style="padding-left: px; padding-right: px;" type="submit" value="异步上传">
 <span id="uptxt" style="display: none">正在上传...</span>
 </p>
 </form>
 <div id="flist" style="border: px dotted darkgray;"></div>
 <script>
 // 上传完成后的回调
 function uploadFinished(fileName) {
 addToFlist(fileName);
 loading(false);
 }
 function addToFlist(fname) {
 var temp=["<p id='" + fname + "'>",fname,"<button onclick='delFile(\""+fname+"\");'>删除</button>","</p>"];
 $("#flist").append(temp.join(""));
 }
 function loading(showloading) {
 if (showloading) {
 $("#uptxt").show();
 } else {
 $("#uptxt").hide();
 }
 }
 </script>
</body>
</html>

这种技术有两个关键的地方:

form会指定target,提交的结果定向返回到隐藏的ifram中。(即form的target与iframe的name属性一致)。
提交完成后，iframe中页面与主页面通信，通知上传结果及服务端文件信息.

如何与主页面通信呢?

我们用nodejs在接收完了文件后返回了一个window.parent.主页面定义的方法，执行后可以得知文件上传完成。代码很简单:

router.post('/upload', multipartMiddleware, function(req, res) {
 var fpath=req.files.myfile.path;
 var fname=fpath.substr(fpath.lastIndexOf('\\') + );
 setTimeout(function() {
 var ret=["<script>","window.parent.uploadFinished('"+fname+"');","</script>"];
 res.send(ret.join(""));
 }, );
});

五、使用XMLHttpRequest2来进行真正的异步上传

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>xhr level 异步上传</title>
<script type="text/javascript" src="jquery路径..."></script>
</head>
<body>
<div>
 <p id="upfile">
 附件：<input type="file" id="myfile" style="display: inline">
 </p>
 <p id="upbtn">
 <input style="padding-left: px; padding-right: px;" type="button" value="异步上传" onclick="upload();">
 <span id="uptxt" style="display: none">正在上传...</span>
 <span id="upprog"></span>
 <button id="stopbtn" style="display: none;">停止上传</button>
 </p>
</div>
<div id="flist" style="border: px dotted darkgray;"></div>
<script>
function upload() {
 // 准备FormData
 var fd=new FormData();
 fd.append("myfile", $("#myfile")[0].files[0]);
 // 创建xhr对象
 var xhr=new XMLHttpRequest();
 // 监听状态，实时响应
 // xhr 和 xhr.upload 都有progress事件，xhr.progress是下载进度，xhr.upload.progress是上传进度
 xhr.upload.onprogress=function(event) {
 if (event.lengthComputable) {
 var percent=Math.round(event.loaded / event.total);
 console.log('%d%', percent);
 $("#upprog").text(percent);
 }
 };
 // 传输开始
 xhr.onloadstart=function(event) {
 console.log('load start');
 $("#upprog").text('开始上传');
 $("#stopbtn").one('click', function() {
 xhr.abort();
 $(this).hide();
 });
 loading(true);
 };
 // ajax过程成功完成事件
 xhr.onload=function(event) {
 console.log('load success');
 $("#upprog").text('上传成功');
 console.log(xhr.responseText);
 var ret=JSON.parse(xhr.responseText);
 addToFlist(ret.fname);
 };
 // ajax过程发生错误事件
 xhr.onerror=function(event) {
 console.log('error');
 $("#upprog").text('发生错误');
 };
 // ajax被取消
 xhr.onabort=function(event) {
 console.log('abort');
 $("#upprog").text('操作被取消');
 };
 // loadend传输结束，不管成功失败都会被触发
 xhr.onloadend=function (event) {
 console.log('load end');
 loading(false);
 };
 // 发起ajax请求传送数据
 xhr.open('POST', '/upload', true);
 xhr.send(fd);
}
function addToFlist(fname) {
 var temp=["<p id='" + fname + "'>",fname,"<button onclick='delFile(\"" + fname + "\");'>删除</button>","</p>"];
 $("#flist").append(temp.join(""));
}
function delFile(fname) {
 console.log('to delete file: ' + fname);
 // TODO: 请实现
}
function loading(showloading) {
 if (showloading) {
 $("#uptxt").show();
 $("#stopbtn").show();
 } else {
 $("#uptxt").hide();
 $("#stopbtn").hide();
 }
}
</script>
</body>
</html>

代码有点多，但是通俗易懂。使用过AJAX的人都知道，XHR对象提供了一个onreadystatechange的回调方法来监听整个请求/响应过程。在XMLHttpRequest2级规范中又多了几个进度事件。有以下6个事件:

1.loadstart: 在接收到响应数据的第一个字节时触发。

2.progress: 在接收响应期间持续不断地触发。

3.error: 在请求发生错误时触发。

4.abort: 在因为调用abort()方法而终止连接时触发。

5.load: 在接收到完整的响应数据时触发。

6.loadend: 在通信完成或者触发error,abort,load事件后触发。

这次我们可以解读代码:当传输事件开始后，我们便在停止传送按钮上添加点击事件，内置了abort方法可以停止传送。若不点则会正常上传直到传送完毕为止。其后台代码类似第二种方法。

六、使用jQuery和FormData来进行异步上传

FormData的详细介绍及使用请点击此处，那里对FormData的方法和事件已经表述的非常清楚，这里就不再浪费时间在介绍一遍了。本文主要针对FormData对象的使用以及异步文件上传进行详细的说明。

FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。

1、从头开始创建一个FormData对象

你可以创建一个你自己的FormData对象，然后通过append() 方法向对象中添加键值对，就像下面这样：

var formData=new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content='<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob=new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request=new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

注意：字段”userfile” 和 “webmasterfile” 都包含文件（file）。被分配到字段”accountnum”上的数字直接被FormData.append()方法转换成了字符串（字段的值（value）可能是一个Blob, File, 或一个string：如果值既不是Blob也不是File，则值会被转换成一个string）。

这个例子创建了一个FormData实例，其中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”，然后使用XMLHttpRequest对象的send()方法去发送表单数据。字段”webmasterfile”是一个Blob。一个Blob对象代表一个文件对象的原始数据。但是Blob代表的数据不必须是javascript原生格式的数据。文件接口是基于Blob,继承Blob功能和扩大它对用户文件系统的支持。为了构建一个Blob可以调用Blob()构造函数。

2、从一个HTML表单获得一个FormData对象

为了获得一个包含已存在表单数据的FormData对象，在创建FormData对象的时候需要指定表单元素。

var formData=new FormData(someFormElement);

就像下面这样：

var formElement=document.querySelector("form");
var request=new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

你也可以在获得FormData对象之后增加另外的数据，就像下面这样：

var formElement=document.querySelector("form");
var formData=new FormData(formElement);
var request=new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

这样你可以在发送之前增加额外的信息，不一定是用户编辑的。

3、使用FormData对象发送文件

你可以使用FormData发送文件。简单的<form>中在包含一个<input>元素就可以：

<form enctype="multipart/form-data" method="post" name="fileinfo">
 <label>Your email address:</label>
 <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
 <label>Custom file label:</label>
 <input type="text" name="filelabel" size="12" maxlength="32" /><br />
 <label>File to stash:</label>
 <input type="file" name="file" required />
 <input type="submit" value="Stash the file!" />
</form>
<div></div>

然后你可以使用下面的代码去发送：

var form=document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
 var oOutput=document.querySelector("div"),
 oData=new FormData(form);
 oData.append("CustomField", "This is some extra data");
 var oReq=new XMLHttpRequest();
 oReq.open("POST", "stash.php", true);
 oReq.onload=function(oEvent) {
 if (oReq.status==200) {
 oOutput.innerHTML="Uploaded!";
 } else {
 oOutput.innerHTML="Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
 }
 };
 oReq.send(oData);
 ev.preventDefault();
}, false);

你也可以直接向FormData对象中添加File或Blob，就像下面这样：

data.append("myfile", myBlob, "filename.txt");

当使用append() 方法的时候，可能会使用到第三个参数去发送文件名称（通过Content-Disposition头发送到服务器）。如果没有指定第三个参数或这个参数不被支持的话，第三个参数默认是”blob”。

如果你设置好正确的options，你也可以和jQuery配合起来使用：

低版本安卓中对TextView加载html所支持的标签不够多，比如在搭载了android 5.1的手机上我们的app调用了Html.froml为TextView设置文本时，当source包含span标签时不会处理，高版本则会去处理；

对比下高低版本的Html.java如下：

android api level 22

android api level 28

我们发现，高版本是支持span标签的，那低版本怎么处理呢？我们看到方法handleStartTag

中在不支持的标签都会回调一个方法：

所以我们只需要传入自定义的TagHandler就可以处理Html.java不支持的标签了。

一开始我们为TextView设置文本时这样写：

String text="创建<span style='color: #ff8500;'>7</span>天，累计消费<span style='color: #ff8500;'>15</span>元";
textview.setText(Html.fromHtml(text));

高版本手机正常加载span标签，低版本的手机效果如下：

更改后这样写：

String text="创建<span style='color: #ff8500;'>7</span>天，累计消费<span style='color: #ff8500;'>15</span>元";
textview.setText(Html.fromHtml(text,null,new CustomTagHandler()));

更改后在低版本效果如下：

CustomTagHandler的实现参考高版本的Html.java，完整代码如下：

在线咨询

上一篇：odoo模型层的记录集与操作
下一篇：JavaScript SDK 设计指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商