HTML表单信息提交的⼏种⽅式
前⾔
通过表单提交可以将⽤户的信息提交到后台，后台程序根据业务逻辑取出⽤户在表单中提交的各种信息来识别⽤户⾝份等信息。那么前端代码在提交表单的时候，需要考虑到哪些情况呢？
那么下⾯我们就来就要的聊聊⽤户在前端代码中提交表单的⼏种形式
⾸先：如果后台是⼀个简单的LAMP（P意为Python），使⽤tornado框架做的后台。那么后台的路由处理是这样的
w3school与w3cschool1 # Python write by yhy
2 import tornado.web
3 import tornado.ioloop
4 import os
5
companion是什么意思6 class IndexHandler(tornado.web.RequestHandler):
7 def get(self, *args, **kwargs):
8
9 der('index.html')
10
11 def post(self, *args, **kwargs):
12 # 拿到input表单的value
jquery下载超大文件13 _argument('user', None)
14 # 拿到复选框的value，是⼀个列表
15 _argument('favor', None)
16 # 拿到input表单上传的⽂件内容, file_metas其实是⼀个列表，但是在tornado⾥⾯只能通过迭代的⽅式将其取出
17 # 注意这个upload_file是⽂件上传的name值，通过name值取出value，file_metas就是列表
18 file_metas = quest.files['upload_file']
19 # 虽然列表中只有⼀个数据，但是也必须迭代
20 # meta就是⽂件对象
21 for meta in file_metas:
22 # 拿到⽂件名
23 file_name = meta['filename']
24 print(file_name)
25 # 拿到以⼆进制的形式打开⼀个本地⽂件，并且将图⽚的内容写⼊⽂件
26 with open(os.path.join('statics', 'img', file_name), 'wb') as f:
27 f.write(meta['body'])
28 self.write('post⽅法返回的请求')
29
30 settings = {
31 'template_path': 'views',
32 'static_path': 'statics'
33 }
34
35 application = tornado.web.Application([
36 (r'/index', IndexHandler),
37 ],**settings)
38
39 if __name__ == '__main__':
40 application.listen(8880)
41 tornado.ioloop.IOLoop.instance().start()
tornado
第⼀种：Form元素提交表单信息
Form元素提交表单信息是⼀种最简单的提交⽅式，但是Form元素在提交的时候会刷新浏览器的页⾯，导致⽤户的体验感下降
1<form action="/index" method="POST" enctype="multipart/form-data">
2<input type="file" name="upload_file">
3<input type="text">
4<input type="submit">
5</form>
form表单提交
this 怎么读语音第⼆种：原⽣的Ajax提交表单信息
原⽣的Ajax提交表单的时候，创建了⼀个Formdata类的实例，我们可以把这个实例想象成为⼀个数组容器，在这个容器⾥⾯可以随意添加⽤户需要的信息，最后通过xhr.send()⽅法，将这个实例提交到后台，后台解析提交的实例，拿到⽤户的信息
1<!DOCTYPE html>
2<html>
3<head lang="en">
4<meta charset="UTF-8">
5<title></title>
6</head>
7<body>
8
9<input type="file" id="img">
10<input type="button" onclick="UploadFile();" value="提交">
11<script>
12function UploadFile() {
13// 获取上传的⽂件对象
14var fileObj = ElementById('img').files[0];
15// 创建Form对象
16var form = new FormData();
17 form.append('user', 'v1');
18 form.append('favor', 'v1');
19 form.append('upload_file', fileObj);
20// 创建xhr
21var xhr = new XMLHttpRequest();
ifnull和isnull22 xhr.open('post', '/index', true);
23 xhr.send(form);
24 }
25</script>
26</body>
27</html>
原⽣Ajax提交
第三种：基于jQuery的Ajax提交表单信息
基于jQuery的Ajax提交表单信息，和原⽣的Ajax提交的信息类似，同样是将⽤户的信息添加到Formdata类的实例中
1<!DOCTYPE html>
2<html>
3<head lang="en">
4<meta charset="UTF-8">
5<title></title>
6<script src="../static/jquery.js"></script>
7</head>
8<body>
9<input type="file" id="img"/>
10<input type="button" onclick="UploadFile();" value="提交"/>
11<script>
12function UploadFile(){
13var fileObj = $("#img")[0].files[0];
14var form = new FormData();
15 form.append('user', "v1");
16 form.append('favor', 'yes');
17 form.append("upload_file", fileObj);
18 $.ajax({
19 type:'POST',
20 url: '/index',
21 data: form,
22// 注意：processData和contentType这两个参数必须为false，因为这两个参数会如果会使得jQuery对上传⽂件进⾏处理
23 processData: false, // tell jQuery not to process the data
24 contentType: false, // tell jQuery not to set contentType
25 success: function(arg){
26 console.log(arg);
27 }
28 })
29 }
30</script>
31</body>
32</html>
基于jQuery的Ajax提交
第四种：基于iframe元素提交表单信息
基于iframe元素提交表单信息，是利⽤了iframe元素具有‘请求页⾯不刷新的特点’。因此，我们可以将Form元素的target属性指向iframe，效果类始于将Form元素包括input元素注⼊到iframe⼀样，在iframe内部提交表单信息
iframe应⽤场景最多的地⽅在于需要考虑IE⽼版本的兼容性问题时，就可以利⽤iframe元素来提交表单信息
1<!DOCTYPE html>
2<html>
3<head lang="en">
4<meta charset="UTF-8">
5<title></title>
6<style>
7 .hide{
8 display: none;
9 }
10</style>
11<script src="../statics/jquery.js"></script>
12</head>
13<body>
14<form id="my_form" name="form" action="/index" method="POST" enctype="multipart/form-data">
15<div id="main">
16<input name="user" type="text"/>
17<input name="favor" type="text"/>
18<input name="upload_file" type="file"/>
19<input type="button" name="action" value="Upload" onclick="redirect()"/>
20<!-- 这⾥有个iframe元素 -->
21<iframe id='my_iframe' name='my_iframe' src="" class="hide"></iframe>
22</div>
23</form>
24
25<script>
26function redirect(){
27// 到iframe元素，等iframe加载完毕之后，⾃动调⽤Testt()函数
28 ElementById('my_iframe').onload = Testt;
29/*
30到form元素，让form.target为iframe元素，就是将form表单注⼊进iframe元素⾥⾯
31由于iframe加载页⾯的时候, 也就是提交数据的时候，页⾯不会刷新。
32这⾥所说的iframe提交的数据可以是iframe元素的src属性请求的页⾯，或者是通过js注⼊的表单form元素33这个例⼦演⽰的是在iframe⾥⾯注⼊了form表单
34因此，底下这句就是讲form元素注⼊进了iframe元素⾥⾯
35*/
36 ElementById('my_form').target = 'my_iframe';
37// 动态提交form表单
38 ElementById('my_form').submit();
39 }
40
datasource的用法41function Testt(ths){
42// 拿到iframe返回的内容，后台给iframe元素返回的内容
43// 这⾥⾥⾯很奇怪，是⼀个完整的HTML页⾯，因此，必须取到body⾥⾯的内容就是服务端返回的值
44var t = $("#my_iframe").contents().find("body").text();
45 console.log(t);
46 }
47</script>
48</body>
49</html>
基于iframe提交
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论