需求
前端:
html定义好form表单的输入信息(text+file)标签
js通过Ajax异步提交表单中的内容。
后端:
通过接口接收表单中的数据(String+MultipartFile)
实现
HTML部分 :html定义好form表单的输入信息(text+file)标签
-
//定义好id,ajax会用到
-
<form id="form-add">
-
//单选项 (解释:name要与接口的参数名对应起来,value是对应值)
-
<input type="radio" name="imageNameIndex" value="1"> 一号位
-
<input type="radio" name="imageNameIndex" value="2"> 二号位
-
<input type="radio" name="imageNameIndex" value="3"> 二号位
-
//文字 (解释:name要与接口的参数名对应起来)
-
<input type="text" name="url">
-
//文件 (解释:name要与接口的参数名对应起来)
-
<input type="file" name="file">
-
//提交 (解释:这个按钮的唯一作用就是触发提交的js方法)
-
<button type="button" οnclick="submitFunction()">提交</button>
-
</form>
JS部分:首先你得先引入JQuery。
-
function submitFunction() {
-
//这里唯一需要注意的就是这个form-add的id
-
var formData = new FormData($("#form-add")[0]);
-
$.ajax({
-
//接口地址
-
url: '/submit' ,
-
type: 'POST',
-
data: formData,
-
async: false,
-
cache: false,
-
contentType: false,
-
processData: false,
-
success: function (data) {
-
//成功的回调
-
if(data.code == 300){
-
}
-
},
-
error: function (returndata) {
-
//请求异常的回调
-
// modals.warn("网络访问失败,请稍后重试!");
-
}
-
});
-
}
后端Controller部分
-
@RequestMapping(value = "/submit", method = RequestMethod.POST)
-
public BaseBody submit(String imageNameIndex, String url, MultipartFile file)
-
throws Exception {
-
//这里就可以获取里面的上传过来的数据了
-
//做一些存库操作,以及返回的数据
-
}