前言
通过表单提交可以将用户的信息提交到后台，后台程序根据业务逻辑取出用户在表单中提交的各种信息来识别用户身份等信息。那么前端代码在提交表单的时候，需要考虑到哪些情况呢？
那么下面我们就来就要的聊聊用户在前端代码中提交表单的几种形式
首先：如果后台是一个简单的LAMP（P意为Python），使用tornado框架做的后台。那么后台的路由处理是这样的
1 # Python write by yhy
2 import tornado.web
3 import tornado.ioloop
4 import os
5
6 class IndexHandler(tornado.web.RequestHandler):
7 def get(self, *args, **kwargs):
8
9 self.render('index.html')
10
11 def post(self, *args, **kwargs):
12 # 拿到input表单的value
13 self.get_argument('user', None)
14 # 拿到复选框的value，是一个列表
15 self.get_argument('favor', None)
16 # 拿到input表单上传的文件内容, file_metas其实是一个列表，但是在tornado里面只能通过迭代的方式将其取出
17 # 注意这个upload_file是文件上传的name值，通过name值取出value，file_metas就是列表
18 file_metas = self.request.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表单提交
第二种：原生的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>
12 function UploadFile() {
13 // 获取上传的文件对象
14 var fileObj = document.getElementById('img').files[0];
15 // 创建Form对象
16 var form = new FormData();
17 form.append('user', 'v1');
18 form.append('favor', 'v1');
19 form.append('upload_file', fileObj);
20 // 创建xhr
21 var xhr = new XMLHttpRequest();
22 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>
12 function UploadFile(){
13 var fileObj = $("#img")[0].files[0];
14 var 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>
26 function redirect(){
27 // 找到iframe元素，等iframe加载完毕之后，自动调用Testt()函数
28 document.getElementById('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 document.getElementById('my_form').target = 'my_iframe';
37 // 动态提交form表单
38 document.getElementById('my_form').submit();
39 }
40
41 function Testt(ths){
42 // 拿到iframe返回的内容，后台给iframe元素返回的内容
43 // 这里里面很奇怪，是一个完整的HTML页面，因此，必须取到body里面的内容就是服务端返回的值
44 var t = $("#my_iframe").contents().find("body").text();
45 console.log(t);
46 }
47 </script>
48 </body>
49 </html>基于iframe提交
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
