form表單提交之Ajax版和常用版區別和聯絡。
阿新 • • 發佈：2019-02-15
使用Ajax方法實現form表單的提交
1.區別 聯絡
在使用form表單的時候,一旦點選提交觸發submit事件，一般會使得頁面跳轉，頁面間的跳轉等行為的控制權往往在後端的控制層，後端會控制頁面的跳轉及資料傳遞。
但是當不希望頁面跳轉或者是想要將控制權放在前端，讓JS來控制頁面的跳轉或者資料變化。這個時候往往需要非同步操作。
也就是使用ajax方式，通過ajax方法實現form表單的提交併進行後續的非同步操作。
2.提交方式示例
1.常見的form表單提交方式
程式碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" 使用form表單的action和 method來決定提交到的地方和提交的方式。這也是常用的提交方式。
當點選登入按鈕後，即觸發form表單的提交事件，資料傳輸至後端，然後由後端來控制頁面跳轉到哪裡和資料怎麼傳遞。
這樣的話，第一更新以後你需要重新整理頁面，第二控制權在後臺，不便於追蹤。
2.ajax實現form提交方式
說一下修改的地方:
A. 將form元素的屬性action和method去掉，必須新增id=”xxxx”,form元素就變為< form id=”xxxx”>
B. 將提交按鈕的button的type=”submit” 改為 type=”button”，設定一個 id名稱。
C. 在js檔案中寫入如下通用程式碼：
$("#按鍵的id").click(function () {
$.ajax({
type: "POST", //提交的方法
url:"/user/login", //提交的地址
data:$('#xxx').serialize(), //序列化表單值輸出
async: false,
error: function(request) { //失敗的話
alert("提交失敗 error");
},
success: function(data) { //成功
alert(data); //就將返回的資料顯示出來
window.location.href="跳轉頁面"
}
});
}); 具體示例：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表單提交Ajax的使用</title>
<meta http-equiv="description" content="ajax方式">
<!-- 需要引入Jquery任意版本 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 表單提交Ajax的使用 -->
<script type="text/javascript">
function login() {
$.ajax({
//注意一下這幾個引數
type : "POST", //方法型別
dataType : "JSON", //預期伺服器返回的資料型別JSON
url : "/user/login", //提交到的 url
data : $('#form1').serialize(), //序列化輸出字串型別的結果
success : function(result) {
console.log(result); //列印服務端返回的資料(除錯用)
if (result.resultCode == 200) { //200狀態碼 = 成功
alert("請求成功 success!");
}
;
},
error : function() {
alert("請求失敗，error!");
}
});
}
</script>
</head>
<body>
<div id="form-div">
<form id="form1" onsubmit="return false" action="##" 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="button" value="登入" onclick="login()">
</p>
</form>
</div>
</body>
</html>3.總結和提醒
在常用方式中，點選的登入按鈕的type為”submit”型別；form的action不為空；
在Ajax方式中需要注意的是$.ajax方法中的引數：dataType和data屬性的設定。必須新增id屬性。