如何使用Ajax方法實現(xiàn)Form表單的提交
這篇文章主要介紹了如何使用Ajax方法實現(xiàn)Form表單的提交，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)云計算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、川西大數(shù)據(jù)中心、云服務(wù)器、虛擬空間、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗，已先后獲得國家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機、虛擬空間、空間域名、VPS主機、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。
常見的form表單提交方式
login test
用戶名：
密 碼：
點擊登錄按鈕后，即觸發(fā)form表單的提交事件，數(shù)據(jù)傳輸至后端，由后端控制頁面跳轉(zhuǎn)和數(shù)據(jù)。
ajax實現(xiàn)form提交方式
修改完成后代碼如下：
login test
function login() {
$.ajax({
//幾個參數(shù)需要注意一下
type: "POST",//方法類型
dataType: "json",//服務(wù)端接收的數(shù)據(jù)類型
url: "/users/login" ,//url
data: $('#form1').serialize(),
success: function (result) {
console.log(result);//打印服務(wù)端返回的數(shù)據(jù)(調(diào)試用)
if (result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function() {
alert("異常！");
}
});
}
用戶名：
密 碼：
注意事項
我平時很少寫前端代碼，級別也就是入門級別，能看懂能改而已，所以很多時候都是百度，像這次這個功能的實現(xiàn)也是借助了百度，但是，我百度到的代碼在$.ajax方法中設(shè)置的dataType參數(shù)值為"html"而不是"json"，導(dǎo)致我在一開始調(diào)試的時候一直報錯，最終是改成了"json"才成功，因此在這里特別說明并提醒一下，別和我一樣走錯了路，還有就是向服務(wù)端傳輸?shù)膁ata值了，像上面代碼一樣，將form表單中的數(shù)據(jù)序列化傳輸即可。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用Ajax方法實現(xiàn)Form表單的提交”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前標題：如何使用Ajax方法實現(xiàn)Form表單的提交
新聞來源：
http://weahome.cn/article/ggpodj.html
重慶分公司
重慶分公司
