使用form表单提交请求（文件）如何获取后台返回的数据
问题描述
一般的form表单提交是单向的：只能给服务器发送数据，但是无法获取服务器返回的数据，也就是无法读取HTTP应答包。
想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦。
解决方法
1、使用 JQuery
jQuery封装了一个form表单提交有回调功能的方法
导入
jquery
jquery-form.js
获取：jquery.form.js
链接：https://pan.baidu.com/s/1J3gGpDx99K58cD9LZ_XIvw
提取码：p9qt
获取：jquery.js
链接：https://pan.baidu.com/s/1ZgDQ_EaXOGFE13xVyMF7qg
提取码：50wa
案例
form上传文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导入文件</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.form.js"></script>
</head>
<body>
<form id="form1" action="/test/updload" enctype="multipart/form-data" method="post">
<table>
<tr>
<td>请选择头像:</td>
<td><input type="file" name="image"/></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="提交"/></td>
<td><input type="reset" name="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
// $(function ())是文档document加载完自动调用的函数
$(function () {
/*
获取form元素，调用其ajaxForm(...)方法
内部的function(data)的data就是后台返回的数据
*/
$("#form1").ajaxForm(function (data) {
console.log(data);
console.log("str:" + JSON.stringify(data));
}
);
});
请求的url在form的action中定义，获取到的后台数据是JSON格式$(function ())如果不套在外面，里面的这个请求函数没法自启动后台代码
2、使用ajax来发送请求提交表单
<form id="userInfo" >
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">姓名label>div>
<div class="weui-cell__bd">
<input class="weui-input" id="username" name="username" type="text" pattern="[0-9]*" placeholder="请输入姓名">
div>
div>
<div class="weui-cell ">
<div class="weui-cell__hd">
<label class="weui-label">年龄label>
div>
<div class="weui-cell__bd">
<input class="weui-input" id="age" name="age" type="number" placeholder="请输入年龄">
div>
div>
<div class="weui-cell ">
<div class="weui-cell__hd">
<label class="weui-label">地址label>
div>
<div class="weui-cell__bd">
<input class="weui-input" id="address" name="address" type="text" placeholder="请输入地址">
div>
div>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:" id="saveUserInfo">确定a>
div>
form>
$("#saveUserInfo").click(function() {
var formObject = {};
var formArray =$("#userInfo").serializeArray();
$.each(formArray,function(i,item){
formObject[item.name] = item.value;
});
$.ajax({
url:"user/addUser",
type:"post",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(formObject),
dataType: "json",
success:function(data){
alert(data.msg);
},
error:function(e){
alert("错误！！");
}
});
});
form上传文件
<script type="text/javascript" src="./jquery.js">script>
<script type="text/javascript" src="./jquery.form.js">script>
<form id="form2" enctype="multipart/form-data">
<input type="file" id="upload" name="test_e">
<button type="submit">提交button>
form>
/* 文件改变时触发文件上传 */
$('#upload').change(function(){
// 设置ajax参数
var options = {
//target: '#output', //把服务器返回的内容放入id为output的元素中
//beforeSubmit: showRequest, //提交前的回调函数
//url: url, //默认是form的action， 如果申明，则会覆盖
//clearForm: true, //成功提交后，清除所有表单元素的值
//resetForm: true, //成功提交后，重置所有表单元素的值
//timeout: 3000, //限制请求的时间，当请求大于3秒后，跳出请求
url : 请求地址,
type: 请求方式,
headers:{
请求头参数设置
},
success: function (res) {
if (res.status==200) {
alert('上传成功！');
}else if(res.status == 404){
location.href="../404.html";
}else if(res.status == 403){
window.location.href="../../index.html";
}else{
console.log('上传失败');
}
}
}
// 提交表单
$('#form2').ajaxSubmit(options);
return false;
})
@RestController
@RequestMapping("/test")
public class StoreOrderController {
@PostMapping("/uplaod")
public ResponseEntity<Map<String, String>> uploadFile(@RequestParam("test_e") MultipartFile file){
Map map = new HashMap();
String fileName = file.getOriginalFilename();
if(file.isEmpty()){
map.put("status", "9999");
map.put("message", "上传文件不能为空");
return ResponseEntity.ok(map);
}
......
}
}