前端数据提交给后端之HTML表单简单剖析

在开篇

什么是表单呢？当前端想要提交数据给后端，怎么搞？那么在前端开发中，表单是常用的手段，比如常见的场景有：登录框、账号注册页、主机信息录入CMDB等等场景都是需要表单。那么在本篇中，笔者除了讲一些基本的知识点，还会再结合后端的方式来演示如何接收表单提交的数据。希望这些小小的演示可以起到抛砖引玉的效果。

盘点HTML表单基础

1. from元素

构建表单，主要是通过from元素，我们先来一个最简单的小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息录入CMDB</h3>
        <form>
            <label for="hostname">主机名：</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址：</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

通上面的小栗子可以知道，form表单的主要通途是用于收集用户的输入。在from表单里面，还包含着各种不同类型的input元素，比如我们上面小栗子中用到的文本（text）、提交按钮（submit）。

input元素是表单里最重要的元素，它有很多type属性，下面我们来总结下：

类型描述text文本输入radio单选按钮checkbox提交按钮submit提交按钮button可单击按钮

在上面小栗子中，除了input元素之外，不知道大家注意label元素没有。label元素的主要用途是为input元素定义标签，且用for属性和input元素的id属性进行绑定呢。

2. 单选按钮

什么是单选按钮？就是在多个选项中，你只能选其中1个，不能多选。下面我们看个小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，出了两道问答题，均为单选题。那么，类似的需求都是可以使用输入类型为radio来实现需要使用单选按钮的场景。

3. 复选框

什么是复选框？复选框就是可以选择多个选项，当需要多选的时候，使用复选框输入类型就对了。看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，实现复选框的输入类型是checkbox，这个是重点哦！

4. 提交按钮

当有数据要提交给后端的时候怎么搞？如果后端是API服务，可以给它提交json。如果是前端页面，就需要通过构建表单来获取用户的输入。基于表单提交数据给后端，怎么提交？需要一个可以点击的提交按钮，那这个按钮怎么来？先看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

输入类型为submit，说明它就是提交按钮，注意上面代码type="submit"了吗？

HTML表单重要属性

1. Action属性

在之前的例子中，前端表单需要将数据提交给后端，除了需要一个提交按钮外，还需要action属性。当点击提交按钮后，表单的数据该发到后端的哪个url进行处理，就是定义在action属性中。接下来，我们结合前端和后端直接来个小实战，后端代码用Python的Flask框架。

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args=request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后，我们接下来看看效果

输入IP地址后，点击提交

这个ok是后端返回的

后端接收到数据后，啥也没做，只是做了简单打印

这个小栗子很简单，通过这个小栗子，是不是对action属性的用法有了进一步的理解呢？

2. Method属性

method属性的用途是指定提交数据的http方法，通常有2个，get和post。接下来我们在上个小栗子的基础上做个小改造，看下面代码

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args=request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

当前端输入数据后，提交表单时，直接告诉你这是不允许的方法

在这个例子中，是因为前端的表单了指定了method为get请求，而后端接收数据的method规定了需要post请求，故所以出现这个问题。

下面我们改造一下后端代码：

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表单中的method还是保持get请求，再次提交，后端的返回如下：

看到了吗？后端判断前端过来的请求是get还是post，很显然，前端过来的请求是get，并且返回了非常友好的提示。

接下来我们继续改造一下前端的代码，将请求修改为post，代码如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码也稍微改造一下，改变接收前端数据的方法

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        a=request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

输入IP地址，并点击提交

提交后，后端给前端返回了ok

接下来看下后端，后端啥也没做，就获取到表单的数据，然后打印了数据，并且打印了下数据类型

好了，关于前端的action属性和Method属性就讲到这里了。为了讲解action和method，还结合了后端的一丢丢知识，前端和后端的知识点以后都会慢慢讲到哈！

HTML表单常用元素

1. 下拉列表

先来个前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代码：

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        a=request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中选择“Go语言”，并提交

后端啥也没干，就只做了打印

2. 允许多选

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代码中，是使用multiple属性来实现选择多个值。

后端代码的打印方式稍微做了些许调整：

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        data=request.get_data()
        print data
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift键可进行多选

后端打印的效果图下图：

写在最后

关于表单基础知识点的讲解就这么愉快的结束了，关于更多表单的元素、输入属性、输入类型可自行查阅和实战，笔者因时间有限就不一一演示。感谢您的阅读，望多多关注我们、点赞、转发！

本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

在学习异步提交表单之前，先来学习几个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配合起来使用：

解HTTP协议中的POST方法：四种常用的提交数据方式

SEO Meta Description: 了解HTTP协议中POST方法的四种常用提交数据方式：表单提交、JSON数据、XML数据和文件上传，确保高效数据传输和服务器处理。

在互联网通信中，HTTP协议中的POST方法是向服务器提交数据的常用手段。POST请求不仅可以传输简单的表单数据，还能处理复杂的JSON、XML数据以及文件上传。本文将详细介绍四种常用的POST数据提交方式，帮助开发者选择适合的方式进行数据传输。

云服务器，高防服务器就选蓝易云，头条搜索：蓝易云

POST方法概述

POST方法是HTTP协议中用于向服务器发送数据的一种请求方法。与GET方法不同，POST方法将数据包含在请求体中，而不是通过URL参数传递。这种方式确保了数据的安全性和隐私性，特别适合于需要传输大量数据或敏感信息的场景。

表单提交（Form Data）

概述

表单提交是最常见的POST数据方式之一。在HTML中，通过设置 <form>标签的 method属性为 post，可以将用户输入的数据发送到服务器。数据以 application/x-www-form-urlencoded格式编码，作为键值对的形式传递。

数据格式

表单数据会被编码为URL参数，例如：

key1=value1&key2=value2

示例

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

服务器处理

服务器可以通过解析请求体中的数据来获取表单字段的值。以下是一个简单的示例，展示了如何在Node.js中处理表单提交的数据：

const express=require('express');
const bodyParser=require('body-parser');
const app=express();

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit', (req, res)=> {
  const name=req.body.name;
  const email=req.body.email;
  res.send(`Name: ${name}, Email: ${email}`);
});

app.listen(3000, ()=> {
  console.log('Server is running on port 3000');
});

JSON数据（JSON Data）

概述

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于Web应用程序与服务器之间的数据传输。在POST请求中，客户端可以将数据作为JSON对象发送给服务器。

数据格式

请求的 Content-Type头部应设置为 application/json，请求体中包含一个JSON对象，例如：

{
  "name": "John Doe",
  "email": "john.doe@example.com"
}

示例

fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  })
});

服务器处理

服务器端可以解析JSON数据并进行相应的处理。以下是一个简单的示例，展示了如何在Node.js中处理JSON数据：

const express=require('express');
const bodyParser=require('body-parser');
const app=express();

app.use(bodyParser.json());

app.post('/submit', (req, res)=> {
  const { name, email }=req.body;
  res.send(`Name: ${name}, Email: ${email}`);
});

app.listen(3000, ()=> {
  console.log('Server is running on port 3000');
});

XML数据（XML Data）

概述

XML（eXtensible Markup Language）是一种用于标记数据的格式，常用于数据传输和存储。在POST请求中，客户端可以将数据作为XML文档发送给服务器。

数据格式

请求的 Content-Type头部应设置为 application/xml，请求体中包含一个XML文档，例如：

<user>
  <name>John Doe</name>
  <email>john.doe@example.com</email>
</user>

示例

fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/xml'
  },
  body: `
    <user>
      <name>John Doe</name>
      <email>john.doe@example.com</email>
    </user>
  `
});

服务器处理

服务器端可以解析XML数据并进行相应的处理。以下是一个简单的示例，展示了如何在Node.js中处理XML数据：

const express=require('express');
const xmlparser=require('express-xml-bodyparser');
const app=express();

app.use(xmlparser());

app.post('/submit', (req, res)=> {
  const { user }=req.body;
  const name=user.name[0];
  const email=user.email[0];
  res.send(`Name: ${name}, Email: ${email}`);
});

app.listen(3000, ()=> {
  console.log('Server is running on port 3000');
});

文件上传（Multipart Form Data）

概述

文件上传是一种常见的POST数据方式，特别适用于需要传输文件的场景。在这种方式下，数据以 multipart/form-data格式传输，数据被分割成多个部分，每个部分都有自己的头部和内容。

数据格式

请求的 Content-Type头部应设置为 multipart/form-data，请求体中的数据被分割成多个部分，每个部分都有自己的头部和内容，其中包括文件数据和其他表单字段的数据。

示例

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Choose file:</label>
  <input type="file" id="file" name="file"><br><br>
  <input type="submit" value="Upload">
</form>

服务器处理

服务器端可以解析请求体中的各个部分，获取文件和其他字段的数据。以下是一个简单的示例，展示了如何在Node.js中处理文件上传：

const express=require('express');
const multer=require('multer');
const app=express();
const upload=multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res)=> {
  res.send(`File uploaded: ${req.file.originalname}`);
});

app.listen(3000, ()=> {
  console.log('Server is running on port 3000');
});

选择适合的POST提交方式

在实际开发中，选择适当的POST提交方式取决于具体的需求和数据类型。以下是一些建议：

表单提交：适用于简单的表单数据传输，例如登录、注册等。
JSON数据：适用于复杂的结构化数据传输，特别是在前后端分离的Web应用中。
XML数据：适用于需要兼容传统系统或与使用XML的第三方服务进行通信的场景。
文件上传：适用于需要传输文件的场景，例如用户头像上传、文档上传等。

总结

HTTP协议中的POST方法提供了多种数据提交方式，包括表单提交、JSON数据、XML数据和文件上传。每种方式都有其适用的场景和优势。开发者可以根据具体需求选择适当的方式进行数据传输，确保高效、安全地与服务器进行通信。

常见问题解答

提交POST请求时如何选择合适的数据格式？

选择数据格式应根据数据的类型和复杂度。例如，简单表单数据使用 application/x-www-form-urlencoded，复杂结构化数据使用 application/json，需要传输文件时使用 multipart/form-data。

如何处理POST请求中的JSON数据？

在发送JSON数据的POST请求时，设置 Content-Type为 application/json，并将JSON对象作为请求体。服务器端可以使用相应的解析器处理JSON数据。

表单提交和文件上传的主要区别是什么？

表单提交通常用于传输简单的键值对数据，而文件上传使用 multipart/form-data格式，能够传输文件和其他表单字段的数据。

为什么选择POST方法而不是GET方法提交数据？

POST方法将数据包含在请求体中，更适合传输大量数据和敏感信息，而GET方法将数据附加在URL之后，不适合传输大数据或敏感信息。

如何确保POST请求的安全性？

使用HTTPS协议加密数据传输，避免明文传输数据。同时，可以通过验证请求来源、防止CSRF攻击等措施提高安全性。

在Node.js中如何处理POST请求中的XML数据？

使用 express-xml-bodyparser中间件解析XML数据，将数据转换为JSON格式，方便后续处理。

在线咨询

上一篇：javascript 异常处理的一些经验
下一篇：前端代码Review，一次性掰扯明白！

您的项目需求

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

整合营销服务商

前端数据提交给后端之HTML表单简单剖析

在开篇

盘点HTML表单基础

1. from元素

2. 单选按钮

3. 复选框

4. 提交按钮

HTML表单重要属性

1. Action属性

2. Method属性

HTML表单常用元素

1. 下拉列表

2. 允许多选

写在最后

一、ajax方式

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

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

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

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

3、使用FormData对象发送文件

解HTTP协议中的POST方法：四种常用的提交数据方式

POST方法概述

表单提交（Form Data）

概述

数据格式

示例

服务器处理

JSON数据（JSON Data）

概述

数据格式

示例

服务器处理

XML数据（XML Data）

概述

数据格式

示例

服务器处理

文件上传（Multipart Form Data）

概述

数据格式

示例

服务器处理

选择适合的POST提交方式

总结

您的项目需求