整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、使用場景：
安全性都一樣，都是發送的http協議。安全性與提交文件的業務處理（格式檢測，防注入）有關，與提交方式無關。
一般登錄用表單提交，點擊提交觸發submit事件，一般會 使頁面發生跳轉，頁面的跳轉等行為的控制往往在后端，后端控制頁面的跳轉及數據的傳遞；但是某些時候不希望頁面跳轉，或者說想要將控制權放在前端，通過js來操作頁面的跳轉或數據變化，一般這種異步操作，都會使用ajax。
但是Ajax會有個隱藏的問題，即瀏覽器不保存密碼，不符合用戶習慣。理想的方式：建立隱藏的iframe，把form標簽的target指向iframe，然后檢測iframe的狀態。
2、比較：
（1）ajax在提交、請求、接收時，都是異步進行，網頁不需要刷新，只刷新頁面局部，不關心也不影響頁面其他部分的內容。
Form提交則是新建一個頁面，哪怕是提交給自己本身的頁面，也需要刷新，為了維持頁面用戶對表單的狀態改變，要在控制器和模板之間傳遞更多參數以保持頁面狀態。
（2）ajax提交時，是在后臺新建一個請求。
Form卻是放棄本頁面，然后再請求。
（3）ajax必須要用js來實現，存在調試麻煩、瀏覽器兼容問題，而且不啟用js的瀏覽器，無法完成操作。
Form表單是瀏覽器自帶的，無論是否開啟js，都可以提交表單。
（4）ajax在提交、請求、接收時，整個過程都需要使用程序來對其進行數據處理。
Form表單提交，是根據表單結構自動完成，不需要代碼干預。用submit提交。
3、其他方面：
關于輸入內容的校驗，ajax可以在獲取到元素內容用程序判斷；form表單的屬性中有校驗的字段，easyui，jeecg等中都封裝，用戶只需添加正則表達式的校驗規則。
4、例：
（1）使用form提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="form-div">
<form id="form1" action="/users/login" method="post">
<p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="submit" value="登錄"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
景
FormData簡介
The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.
大致意思是你可以將數據使用FormData對象編譯成鍵值對形式，然后使用XMLHttpRequest技術向后端發送數據。主要是用來發送form表單數據，也可以發送帶鍵數據。這種形式傳輸的數據和一個enctype屬性為multipart/form-data并且采用submit()方法提交的form表單傳輸的數據格式相同。
Ajax使用FormData提交數據
只是簡單的示范一下文件上傳，表單數據類似，不寫例子了。
Ajax上傳文件-帶form標簽的FormData提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form id="upload" method="post">
<input id="file" type="file" name="file"/>
<input id="img" type="hidden"/>
<input type="submit" value="上傳圖片">
</form>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var BASE_URL='../'
$(document).ready(function(){
$('#file').on('change', function() {
var formData=new FormData($('#upload')[0])
$.ajax({
url: BASE_URL + 'api/upload',
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function(res) {
console.log(res)
}
})
})
})
</script>
</body>
</html>
<?php
print_r($_FILE);exit();
?>
特點：form表單提交,帶有<form>標簽，enctype="multipart/form-data"不設置也可以。
Ajax不帶form標簽的FormData提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<input id="file" type="file" name="file"/>
<input id="img" type="hidden"/>
<input type="submit" value="上傳圖片">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var BASE_URL='../'
$(document).ready(function(){
$('#file').on('change', function() {
console.log(this.files)
var formData=new FormData()
formData.append("file", this.files[0]);
$.ajax({
url: BASE_URL + 'api/upload',
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function(res) {
console.log(res)
}
})
})
})
</script>
</body>
</html>
<?php
print_r($_FILE);exit();
?>
沒有<form>標簽，基本使用場景中使用的是這種。
Ajax不使用FormData提交數據
從參考2來看，上傳文件需要使用使用FileReader對象,并且Ajax不使用FormData提交數據略復雜，幸虧有一些大咖封裝了一下，比如官方提供了一個A little vanilla framework（一點香草？？？？？？這個使用原生寫的，不是封裝，，，），再比如ajaxFileUpload(github地址是參考5，官方有示例，試了一下，妥妥的支持IE6..)。
感受
FormData是HTML5新增的屬性，可能在兼容瀏覽器上面會拋棄一些古典（old）瀏覽器，不過簡單;利用純Ajax提交也還好，因為有很多現成的庫，比如jquery,axios...從A little vanilla framework的示例（參考2）來看，基本是根據form表單的encypt形式，采用相應的方式發送數據。
參考
有的時候在想，JSP頁面提交數據到后臺，可以被Servlet容器解析，然后獲取到前臺參數。操作成功后，后臺可以重定向或者轉發到其他頁面去。但是，我如何在本頁獲知我已經上傳成功，或者表達那內容提交成功的呢？
普通的html或者jsp控件本身是無法做到的，因為在你點擊submit提交數據以后，瀏覽器就等待response了，剩下的用戶無從干預。
其實，js很容易就能做到這點。
<from action="" enctype="multipart/form-data" method="post"> <a> <span>修改頭像</span> <input type="file" id="fileUp" accept="image/png,image/jpeg"> </a> </from>
var fileM=document.querySelector("#fileUp");
$("#fileUp").on("change",function() {
//獲取文件對象，files是文件選取控件的屬性，存儲的是文件選取控件選取的文件對象，類型是一個數組
var fileObj=fileM.files[0];
//創建formdata對象，formData用來存儲表單的數據，表單數據時以鍵值對形式存儲的。
var formData=new FormData();
formData.append('file', fileObj);
$.ajax({
url: "自己的后臺的Url",
type: "post",
dataType: "json",
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
success: function (json_data) {
alert("上傳成功！");
},
});
});在點擊"修改頭像"的鏈接后，會打開一個文件選擇窗選中圖片后就會將其上傳到服務器。
如果后臺是tomcat，那么就可以從request域中拿到"file"鍵值對應的對象fileObj，開啟流就能接收。
在上面的例子中，formData對象可以添加任意類型的對象，例如string,file,array等等。
所以可以通過原生JS后者類似Jquery這類框架的選擇器，將表單字段獲取到，然后放入formData對象中，并且禁用表單的submit事件（表單禁用submit的方式太多了，這里就不贅述了，由讀者自行百度~），由Ajax異步來提交表單，提交完成后可以接受后臺的JSON反饋，然后告訴用戶提交成功或者失敗，由于什么原因失敗！
不由的感嘆一句，JS在Web開發中的地位真的是無可匹敵呀！
本文僅為學習交流所用，如有錯疏，還望指正。喜歡本文可以收藏，或者點個關注，每天都有新鮮技術分享！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
