整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、使用場(chǎng)景：
安全性都一樣，都是發(fā)送的http協(xié)議。安全性與提交文件的業(yè)務(wù)處理（格式檢測(cè)，防注入）有關(guān)，與提交方式無(wú)關(guān)。
一般登錄用表單提交，點(diǎn)擊提交觸發(fā)submit事件，一般會(huì) 使頁(yè)面發(fā)生跳轉(zhuǎn)，頁(yè)面的跳轉(zhuǎn)等行為的控制往往在后端，后端控制頁(yè)面的跳轉(zhuǎn)及數(shù)據(jù)的傳遞；但是某些時(shí)候不希望頁(yè)面跳轉(zhuǎn)，或者說(shuō)想要將控制權(quán)放在前端，通過(guò)js來(lái)操作頁(yè)面的跳轉(zhuǎn)或數(shù)據(jù)變化，一般這種異步操作，都會(huì)使用ajax。
但是Ajax會(huì)有個(gè)隱藏的問(wèn)題，即瀏覽器不保存密碼，不符合用戶習(xí)慣。理想的方式：建立隱藏的iframe，把form標(biāo)簽的target指向iframe，然后檢測(cè)iframe的狀態(tài)。
2、比較：
（1）ajax在提交、請(qǐng)求、接收時(shí)，都是異步進(jìn)行，網(wǎng)頁(yè)不需要刷新，只刷新頁(yè)面局部，不關(guān)心也不影響頁(yè)面其他部分的內(nèi)容。
Form提交則是新建一個(gè)頁(yè)面，哪怕是提交給自己本身的頁(yè)面，也需要刷新，為了維持頁(yè)面用戶對(duì)表單的狀態(tài)改變，要在控制器和模板之間傳遞更多參數(shù)以保持頁(yè)面狀態(tài)。
（2）ajax提交時(shí)，是在后臺(tái)新建一個(gè)請(qǐng)求。
Form卻是放棄本頁(yè)面，然后再請(qǐng)求。
（3）ajax必須要用js來(lái)實(shí)現(xiàn)，存在調(diào)試麻煩、瀏覽器兼容問(wèn)題，而且不啟用js的瀏覽器，無(wú)法完成操作。
Form表單是瀏覽器自帶的，無(wú)論是否開(kāi)啟js，都可以提交表單。
（4）ajax在提交、請(qǐng)求、接收時(shí)，整個(gè)過(guò)程都需要使用程序來(lái)對(duì)其進(jìn)行數(shù)據(jù)處理。
Form表單提交，是根據(jù)表單結(jié)構(gòu)自動(dòng)完成，不需要代碼干預(yù)。用submit提交。
3、其他方面：
關(guān)于輸入內(nèi)容的校驗(yàn)，ajax可以在獲取到元素內(nèi)容用程序判斷；form表單的屬性中有校驗(yàn)的字段，easyui，jeecg等中都封裝，用戶只需添加正則表達(dá)式的校驗(yàn)規(guī)則。
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簡(jiǎn)介
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.
大致意思是你可以將數(shù)據(jù)使用FormData對(duì)象編譯成鍵值對(duì)形式，然后使用XMLHttpRequest技術(shù)向后端發(fā)送數(shù)據(jù)。主要是用來(lái)發(fā)送form表單數(shù)據(jù)，也可以發(fā)送帶鍵數(shù)據(jù)。這種形式傳輸?shù)臄?shù)據(jù)和一個(gè)enctype屬性為multipart/form-data并且采用submit()方法提交的form表單傳輸?shù)臄?shù)據(jù)格式相同。
Ajax使用FormData提交數(shù)據(jù)
只是簡(jiǎn)單的示范一下文件上傳，表單數(shù)據(jù)類似，不寫例子了。
Ajax上傳文件-帶form標(biāo)簽的FormData提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試</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();
?>
特點(diǎn)：form表單提交,帶有<form>標(biāo)簽，enctype="multipart/form-data"不設(shè)置也可以。
Ajax不帶form標(biāo)簽的FormData提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試</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();
?>
沒(méi)有<form>標(biāo)簽，基本使用場(chǎng)景中使用的是這種。
Ajax不使用FormData提交數(shù)據(jù)
從參考2來(lái)看，上傳文件需要使用使用FileReader對(duì)象,并且Ajax不使用FormData提交數(shù)據(jù)略復(fù)雜，幸虧有一些大咖封裝了一下，比如官方提供了一個(gè)A little vanilla framework（一點(diǎn)香草？？？？？？這個(gè)使用原生寫的，不是封裝，，，），再比如ajaxFileUpload(github地址是參考5，官方有示例，試了一下，妥妥的支持IE6..)。
感受
FormData是HTML5新增的屬性，可能在兼容瀏覽器上面會(huì)拋棄一些古典（old）瀏覽器，不過(guò)簡(jiǎn)單;利用純Ajax提交也還好，因?yàn)橛泻芏喱F(xiàn)成的庫(kù)，比如jquery,axios...從A little vanilla framework的示例（參考2）來(lái)看，基本是根據(jù)form表單的encypt形式，采用相應(yīng)的方式發(fā)送數(shù)據(jù)。
參考
有的時(shí)候在想，JSP頁(yè)面提交數(shù)據(jù)到后臺(tái)，可以被Servlet容器解析，然后獲取到前臺(tái)參數(shù)。操作成功后，后臺(tái)可以重定向或者轉(zhuǎn)發(fā)到其他頁(yè)面去。但是，我如何在本頁(yè)獲知我已經(jīng)上傳成功，或者表達(dá)那內(nèi)容提交成功的呢？
普通的html或者jsp控件本身是無(wú)法做到的，因?yàn)樵谀泓c(diǎn)擊submit提交數(shù)據(jù)以后，瀏覽器就等待response了，剩下的用戶無(wú)從干預(yù)。
其實(shí)，js很容易就能做到這點(diǎn)。
<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() {
//獲取文件對(duì)象，files是文件選取控件的屬性，存儲(chǔ)的是文件選取控件選取的文件對(duì)象，類型是一個(gè)數(shù)組
var fileObj=fileM.files[0];
//創(chuàng)建formdata對(duì)象，formData用來(lái)存儲(chǔ)表單的數(shù)據(jù)，表單數(shù)據(jù)時(shí)以鍵值對(duì)形式存儲(chǔ)的。
var formData=new FormData();
formData.append('file', fileObj);
$.ajax({
url: "自己的后臺(tái)的Url",
type: "post",
dataType: "json",
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
success: function (json_data) {
alert("上傳成功！");
},
});
});在點(diǎn)擊"修改頭像"的鏈接后，會(huì)打開(kāi)一個(gè)文件選擇窗選中圖片后就會(huì)將其上傳到服務(wù)器。
如果后臺(tái)是tomcat，那么就可以從request域中拿到"file"鍵值對(duì)應(yīng)的對(duì)象fileObj，開(kāi)啟流就能接收。
在上面的例子中，formData對(duì)象可以添加任意類型的對(duì)象，例如string,file,array等等。
所以可以通過(guò)原生JS后者類似Jquery這類框架的選擇器，將表單字段獲取到，然后放入formData對(duì)象中，并且禁用表單的submit事件（表單禁用submit的方式太多了，這里就不贅述了，由讀者自行百度~），由Ajax異步來(lái)提交表單，提交完成后可以接受后臺(tái)的JSON反饋，然后告訴用戶提交成功或者失敗，由于什么原因失敗！
不由的感嘆一句，JS在Web開(kāi)發(fā)中的地位真的是無(wú)可匹敵呀！
本文僅為學(xué)習(xí)交流所用，如有錯(cuò)疏，還望指正。喜歡本文可以收藏，或者點(diǎn)個(gè)關(guān)注，每天都有新鮮技術(shù)分享！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
