區別：
Form表單提交：一般都會進行頁面跳轉；
Ajax異步提交：可以不進行頁面跳轉；
Form表單提交
<body>
<div id="forms”>
<form id="form1" action="/users/login" method="post">
<p>用戶名：<input name="userName" type="text" id="userName" value="" /></p>
<p>密 碼：<input name="password" type="password" id="password" value="" /></p>
<p><input type="submit" value="確認"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
用form表單的action和method來確定提交到的地址和提交的方式；
點擊確認按鈕會觸發form表單的提交事件，數據傳輸到后端，然后由servlet后台控制頁面跳轉以及數據傳遞。
Ajax實現form提交方式：
<body>
<div id="forms">
<form id="form1">
<p>用戶名：<input name="userName" type="text" id="userName" value="" /></p>
<p>密 碼：<input name="password" type="password" id="password" value="" /></p>
<p><input type="button" id="btn" value="登錄"> <input type="reset" value="重置"></p>
</form>
</div>
<script type="text/javascript">
$("#btn").click(function () {
$.ajax({
type: "POST", //提交的方法
url:"/user/login", //提交的地址
data:$("#form1").serialize(), //序列化表單值輸出
async: false,
error: function(request) { //失敗的話
alert("提交失敗 error");
},
success: function(data) { //成功
alert(data); //就將返回的數據顯示出來
window.location.href="跳轉頁面"
}
});
});
</script>
</body>
總結：
在常用方式中，點擊的登錄按鈕的type為“submit”類型，form表單的action不為空；
在ajax方式中要注意$.ajax方法中的參數：dataTyp和data屬性的設置。而且要添加id屬性；