關於form表單中使用ajax提交表單,ajax無法success的問題
阿新 • • 發佈:2019-02-05
問題背景:我的畢業設計是重構自己以前寫過的一個小網站,之前寫的時候沒有用任何框架,前後臺互動資料靠el表示式、form表單。在完成畢業設計時使用SpringMVC+Spring+MyBatis+JQuery,統一使用ajax來互動資料。
問題再現:
html關鍵程式碼
<form action="#" onsubmit="registerUserAndPlayer()">
</br></br><input type="submit" value="確定" class="sure" />
</form>
js關鍵程式碼
點選確定註冊後,後臺新增使用者執行成功,資料庫也新增了資料,但是ajax沒有呼叫success方法。function registerUserAndPlayer() { if(!checkAll()) { return false; } var url = "user/addUser"; var username =document.getElementById("username").value; var password =document.getElementById("password").value; var remark =document.getElementById("remark").value; var obj = { username:username, password:password, remark:remark }; var json = JSON.stringify(obj); $.ajax ({ url:url, type:'POST', async:true, data: json, contentType:"application/json", dataType:'json', success:function(data,textStatus,jqXHR){alert(data);window.location.href = "login.html";} }) }
解決方法:
在寫註冊的ajax之前,才寫了兩個其他的ajax,前端和後臺程式碼都沒有問題。後來對比了一下這個ajax和之前寫的ajax有一點不同,這裡是牽扯到了form表單,會不會是因為一些職責耦合或者不相容的問題讓ajax失效了呢?於是我把html程式碼改了一下。
<form action="login.html" onsubmit="return registerUserAndPlayer()"></form>
頁面跳轉部分的職責交給了form表單,前端這邊輸入合法就可以跳轉到登陸頁面,否則不跳轉。但這樣做有個缺陷,就是無法根據後臺的執行情況來做判斷,如果後臺實際新增失敗,頁面仍會跳轉。
之前這個專案裡前後臺數據互動就通過el表示式、表單,既然現在都提倡統一用ajax交換json格式資料,怎麼可能會這樣半吊子一半用原生的form表單一半用ajax請求呢?於是我百度了一下。。。。。。。。。。。。。。。。
原來ajax有關於處理form表單的東東啊!
http://jquery.malsup.com/form/#ajaxForm
這就是沒有系統的學過只會用的壞處!