一、页面跳转
html页面跳转，可以使用form表单或者a标签，如下：
（一）通过form表单的action设置：跳转同时可提交数据
（二）通过a标签href超链接：只跳转不提交数据
二、提交数据
html页面的数据提交至后台，可以使用form表单或者Ajax，如下：
（一）使用form表单提交数据：页面刷新、跳转
可提交文本、文件、选项等多种类型的数据，并在后台应用对应的语句提取，详情见代码，
start.py：
#!/usr/bin/env python
# -*- coding:utf-8 -*-
import tornado.ioloop
import tornado.web
allData = [] # 全体数据库
# 个体数据
class IndexHandler(tornado.web.RequestHandler):
def get(self):
self.render('index.html')
def post(self, *args, **kwargs):
self.write("it is post")
class LoginHandler(tornado.web.RequestHandler):
def get(self):
self.render('login.html',allData = allData)
def post(self, *args, **kwargs):
infoDict = {}
# 单一值获取
userName = self.get_argument('name') # 内部调用的self.request（）模块
password = self.get_argument('pwd')
E_mail = self.get_argument('email')
infoDict['userName'] = userName
infoDict['password'] = password
infoDict['E_mail'] = E_mail
# 单选值获取
sex_number = self.get_argument('sex')
if sex_number == '1':
sex = 'female'
else:
sex = 'male'
infoDict['sex'] = sex
# 多选择获取
hobieList_number = self.get_arguments('hobie')
hobieList = []
for i in hobieList_number:
if i == '1':
hobieList.append('游泳')
elif i == '2':
hobieList.append('跑步')
elif i == '3':
hobieList.append('轮滑')
elif i == '4':
hobieList.append('跳高')
elif i == '5':
hobieList.append('散步')
elif i == '6':
hobieList.append('跳舞')
else:
hobieList.append('其他')
infoDict['hobie'] = hobieList
# 多文本获取
otherHobie = self.get_argument('otherHobie')
infoDict['otherHobie'] = otherHobie
# # 上传文件获取（错误方法）
# myPhoto = self.get_argument('myFile') # 这样只能获取文件名
# print(myFile)
# 上传文件获取（正确方法）
file_metas = self.request.files['myFile'] # request模块,包含所有请求相关方法和信息
for meta in file_metas: # file_metas中只有一个元素，但tornado规定这里必须迭代
fileName = meta['filename']
infoDict['myPhoto'] = fileName
import os
with open(os.path.join('statics','img',fileName),'wb') as upFile: # 指定存储路径
upFile.write(meta['body'])
# 浏览器输出
# import json
# self.write(json.dumps(infoDict))
allData.append(infoDict)
self.redirect("/login")
# 路径解析
settings = {
"template_path":"views",
"static_path":"statics",
"static_url_prefix":"/sss/",
"xsrf_cookies":True,
}
# 二级路由,先匹配域名,
application = tornado.web.Application([
(r"/index",IndexHandler),
(r"/login",LoginHandler),
],**settings)
# 开启服务器，监听
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()View Code
login.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<p>现有信息如下：</p>
<ul style="list-style-type:none;">
{% for item in allData %}
<li>
<img style="height:50px;width:50px;" src="/sss/img/{{item['myPhoto']}}">
<span>{{item['userName']}}+{{item['E_mail']}}+{{item['sex']}}+{{item['hobie']}}+{{item['otherHobie']}}</span>
</li>
{% end %}
</ul>
<hr>
<p>新增信息如下：</p>
<form action="/login" method="post" enctype="multipart/form-data"> <!--上传文件添加enctype-->
{% raw xsrf_form_html() %}
<!--单一值-->
<input type="text" name="name" placeholder="user" />
<input type="text" name="email" placeholder="email" />
<input type="password" name="pwd" placeholder="password" />
<!--单选-->
<p>
<span>Are you a girl ?</span>
<span>yes</span><input type="radio" name="sex" value="1" />
<span>no</span><input type="radio" name="sex" value="2" />
</p>
<!--多选-->
<p>
<span>What do you like?</span><br>
<label for="swim">游泳</label><input type="checkbox" name="hobie" value="1" id="swim" />
<label for="run">跑步</label><input type="checkbox" name="hobie" value="2" id="run" />
<label for="skate">轮滑</label><input type="checkbox" name="hobie" value="3" id="skate" />
<label for="jump">跳高</label><input type="checkbox" name="hobie" value="4" id="jump" />
<label for="walk">散步</label><input type="checkbox" name="hobie" value="5" id="walk" />
<label for="dance">跳舞</label><input type="checkbox" name="hobie" value="6" id="dance" />
<label for="else">其他</label><input type="checkbox" name="hobie" value="7" id="else" />
</p>
<!--多文本-->
<textarea name="otherHobie" style="height:50px;width:500px;" placeholder="请输入其他爱好..."></textarea><br>
<!--上传文件-->
<input type="file" name="myFile" /><br>
<!--确定表单-->
<input type="submit" /> <input type="reset"/>
</form>
</body>
</html>View Code
（二）使用Ajax提交数据：页面不刷新、不跳转
提交文本：
<script>
function SubmitFunc(){
<!--# 方式一：.post-->
<!--$.post(-->
<!--'/login',-->
<!--{'username':$("#userName").val(),'password':$("#passWord").val()},-->
<!--function(severResponse){console.log(severResponse);},-->
<!--);-->
<!--# 方式二：.ajax-->
$.ajax({
method:'POST',
url:'/login',
async:true,
data:{'username':$("#userName").val(),'password':$("#passWord").val()},
dataType:'json', <!--指定返回数据类型，进行相应的解析-->
success:function(severResponse){console.log(severResponse);},
error:function(){alert(arguments[1]);},
});
};
</script>View Code
上传文件:formData对象受浏览器限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<!--利用Ajax上传图片-->
<input type="file" id="myPic" />
<input type="button" value="上传(原生)" onclick="upLoadPicOriginal()" />
<br>
<input type="file" id="img" />
<input type="button" value="上传（jQuery）" onclick="upLoadPicJQuery()" />
<!--1、原生方式-->
<script>
function upLoadPicOriginal(){
var picObj = document.getElementById("myPic").files[0]; <!--获取文件对象-->
var form = new FormData(); <!--创建Form对象-->
form.append("myFile",picObj); <!--文件对象加入Form-->
var xhr = new XMLHttpRequest(); <!--创建Ajax上传-->
xhr.open("post","/login",true);
xhr.send(form);
};
</script>
<!--2、jQuery方式-->
<script src="sss/js/jquery-1.12.4.min.js"></script>
<script>
function upLoadPicJQuery(){
var fileObj = $("#img")[0].files[0];
var form = new FormData();
form.append('myFile',fileObj);
$.ajax({
type:"POST",
url:"/login",
data:form,
processData:false, <!--tell jquery no to process the data-->
contentType:false, <!--tell jquery no to set the contentType-->
success:function(arg){console.log(arg)},
});
}
</script>
</body>
</html>View Code
（三）使用iframe提交数据：不受浏览器限制、页面不刷新
利用iframe加载时不刷新、兼容性好的特性，将form表单提交之后的返回信息，设置在指定的、隐藏的iframe中呈现，
login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<!--iframe标签加载时不刷新，实现文件上传不受兼容性影响，推荐-->
<form name="form" id="my_form" action="/login" method="post" enctype="multipart/form-data">
<div id="main">
<input type="text" name="user" placeholder="name" />
<input type="email" name="E_mail" placeholder="email" />
<input name="myFile" id="my_file" type="file" />
<input name="action" value="Upload" type="button" onclick="redirect()" />
<iframe name="myIframe" id="my_iframe" src="" class="hide"></iframe>
</div>
</form>
<script src="sss/js/jquery-1.12.4.min.js"></script>
<script>
function redirect(){
document.getElementById('my_iframe').onload = Testt; <!--iframe加载完，执行函数Testt-->
document.getElementById('my_form').target = 'myIframe'; <!--提交form表单后的返回内容呈现在iframe中-->
document.getElementById('my_form').submit();
}
function Testt(ths){
var t = $("#my_iframe").contents().find("body").text(); <!--iframe提交请求后从服务器获得的内容-->
console.log(t);
}
</script>
</body>
</html>View Code
start.py：
#!/usr/bin/env python
# -*- coding:utf-8 -*-
import tornado.ioloop
import tornado.web
class LoginHandler(tornado.web.RequestHandler):
def get(self):
self.render('login.html')
def post(self, *args, **kwargs):
userName = self.get_argument('user')
email = self.get_argument('E_mail')
file_metas = self.request.files['myFile']
for meta in file_metas:
fileName = meta['filename']
import os
with open(os.path.join('statics','img',fileName),'wb') as upFile: # 指定存储路径
upFile.write(meta['body'])
self.write("hihihihihi___"+userName+"___"+email)
# 路径解析
settings = {
"template_path":"views",
"static_path":"statics",
"static_url_prefix":"/sss/",
}
# 二级路由,先匹配域名,
application = tornado.web.Application([
(r"/login",LoginHandler),
],**settings)
# 开启服务器，监听
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()View Code
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
