最近在写实训项目时要用到SpringBoot传输文件+字符串,想到ajax异步传输,真正用起来,才发现自己在前端真的一窍不通,初次使用ajax也是漏洞百出,出现了许多问题,但是大部分问题都来源于一个原因,看下面
-
这是我的Script代码
<script> var formData = new FormData();//表单对象 var type = $("#type").val(); var name = $("#name").val(); var date = $("#date").val(); var actors = $("#actors").val(); var introduction = $("#introduction").val(); formData.append("type",type); formData.append("name",name); formData.append("date",date); formData.append("actors",actors); formData.append("introduction",introduction); formData.append("filename1",$("#filename")[0].files[0]); formData.append("picname1",$("#picname")[0].files[0]); function upload() { //json传输 $.ajax({ url: "/upload", data: formData, dataType: "JSON", type: "POST", contentType: false, processData: false, success: function (data) { if (data > 0) { alert("上传成功") } else { alert("上传失败"); } } }); } </script>
可能一眼就能看出哪里不对,我在方法外声明变量了,这导致了一系列的问题,折磨了我两天
正确的是这样的
function upload() { var formData = new FormData();//表单对象 var type = $("#type").val(); var name = $("#name").val(); var date = $("#date").val(); var actors = $("#actors").val(); var introduction = $("#introduction").val(); formData.append("type",type); formData.append("name",name); formData.append("date",date); formData.append("actors",actors); formData.append("introduction",introduction); formData.append("filename1",$("#filename")[0].files[0]); formData.append("picname1",$("#picname")[0].files[0]); //json传输 $.ajax({ url: "/upload", data: formData, dataType: "JSON", type: "POST", contentType: false, processData: false, success: function (data) { if (data > 0) { alert("上传成功") } else { alert("上传失败"); } } }); }
可能除了我没人会踩这个坑了吧,写给自己,让自己长点记性。