1、使用場景：
安全性都一樣，都是發(fā)送的http協(xié)議。安全性與提交文件的業(yè)務(wù)處理（格式檢測，防注入）有關(guān)，與提交方式無關(guān)。
一般登錄用表單提交，點擊提交觸發(fā)submit事件，一般會 使頁面發(fā)生跳轉(zhuǎn)，頁面的跳轉(zhuǎn)等行為的控制往往在后端，后端控制頁面的跳轉(zhuǎn)及數(shù)據(jù)的傳遞；但是某些時候不希望頁面跳轉(zhuǎn)，或者說想要將控制權(quán)放在前端，通過js來操作頁面的跳轉(zhuǎn)或數(shù)據(jù)變化，一般這種異步操作，都會使用ajax。
但是Ajax會有個隱藏的問題，即瀏覽器不保存密碼，不符合用戶習(xí)慣。理想的方式：建立隱藏的iframe，把form標(biāo)簽的target指向iframe，然后檢測iframe的狀態(tài)。
2、比較：
（1）ajax在提交、請求、接收時，都是異步進(jìn)行，網(wǎng)頁不需要刷新，只刷新頁面局部，不關(guān)心也不影響頁面其他部分的內(nèi)容。
Form提交則是新建一個頁面，哪怕是提交給自己本身的頁面，也需要刷新，為了維持頁面用戶對表單的狀態(tài)改變，要在控制器和模板之間傳遞更多參數(shù)以保持頁面狀態(tài)。
（2）ajax提交時，是在后臺新建一個請求。
Form卻是放棄本頁面，然后再請求。
（3）ajax必須要用js來實現(xiàn)，存在調(diào)試麻煩、瀏覽器兼容問題，而且不啟用js的瀏覽器，無法完成操作。
Form表單是瀏覽器自帶的，無論是否開啟js，都可以提交表單。
（4）ajax在提交、請求、接收時，整個過程都需要使用程序來對其進(jìn)行數(shù)據(jù)處理。
Form表單提交，是根據(jù)表單結(jié)構(gòu)自動完成，不需要代碼干預(yù)。用submit提交。
3、其他方面：
關(guān)于輸入內(nèi)容的校驗，ajax可以在獲取到元素內(nèi)容用程序判斷；form表單的屬性中有校驗的字段，easyui，jeecg等中都封裝，用戶只需添加正則表達(dá)式的校驗規(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; chart=UTF-8">
</head>
<body>
<div id="form-div">
<form id="form1" action="/urs/login" method="post">
<p>用戶名：<input name="urName" type="text" id="txtUrName" 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="ret" value="重置"></p>
</form>
</div>
</body>
</html>
12345678910111213141516（2）使用ajax提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; chart=UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function login() {
$.ajax({
type: "POST",
dataType: "json",//服務(wù)器返回的數(shù)據(jù)類型
contentType: "application/json",//post請求的信息格式
url: "/urs/login" ,
data: $('#form1').rialize(),
success: function (result) {
console.log(result);//在瀏覽器中打印服務(wù)端返回的數(shù)據(jù)(調(diào)試用)
if (result.resultCode == 200) {
alert("SUCCESS");
};
},
error : function() {
alert("異常！");
}
});
}
</script>
</head>
<body>
<div id="form-div">
<form id="form1" onsubmit="return fal" action="##" method="post">
<p>用戶名：<input name="urName" type="text" id="txtUrName" tabindex="1" size="15" value=""/></p>
<p>密 碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="button" value="登錄" onclick="login()"> <input type="ret" value="重置"></p>
</form>
</div>
</body>
</html>
本文發(fā)布于:2023-02-28 20:07:00，感謝您對本站的認(rèn)可！
本文鏈接：http://www.newhan.cn/zhishi/a/167765674579319.html
版權(quán)聲明：本站內(nèi)容均來自互聯(lián)網(wǎng)，僅供演示用，請勿用于商業(yè)和其他非法用途。如果侵犯了您的權(quán)益請與我們聯(lián)系，我們將在24小時內(nèi)刪除。
本文word下載地址：ajax提交form表單(ajax提交form表單文件).doc
本文 PDF 下載地址：ajax提交form表單(ajax提交form表單文件).pdf
| 留言與評論（共有 0 條評論） |
