完美解決form表單中提交Ajax請求不進入回調方法無法接收返回的任何數據

問題描述

做了個簡單的註冊功能 提交用戶名和密碼信息到後臺 後臺返回status 很簡單的邏輯
然而令我疑惑的是 在前臺的ajax一直無法接收到後臺返回的數據 無論是success回調還是error回調
剛開始還以爲是不是類型轉換的問題 於是乎進行JSON轉換 但轉來轉去依舊無法解決 因爲壓根沒進入任何回調函數
折騰了一天了 包括後臺的@RequestBody註解、@RequestParam註解、@PostMapping註解的produces屬性和前臺的dataType屬性和Content-Type屬性全都換了個遍 但問題依舊
由於我是用mui的ajax提交的 甚至換成了原生js來發送ajax 但問題還是一樣出現…
經過我的反覆測試 問題是時有時無 有幾次是註冊失敗時能正常返回數據 註冊成功時又無法返回了🙄

原因

看了一篇博客後很有啓發 可能是請求了兩次
想起偶然在一次測試中 後臺返回的數據是兩條 可我明明只點擊了一次按鈕 更加印證了我的判斷

我的表單是這樣的：

<form id="form">
	<input type="text"  placeholder="用戶名"/>
	<input type="password" placeholder="密碼"/>
	<input type="password" placeholder="確認密碼"/>
	<button type="submit">註冊</button>
</form>

JS是這樣的：

form.addEventListener("submit",function(){
	mui.ajax("http://000,000,000,000:1234/api/demo",{
		data:{
			username:表單值,
			password:表單值,
		},
		dataType:'json',
		type:'post',
		timeout:10000,
		headers:{'Content-Type':'application/json'},	              
		success:function(data){
			console.log(data);
		}
	})
})

原因就在於 我點擊按鈕請求了兩次後臺
第一次請求的是<form>中的action 這是空的 第二次請求的纔是ajax的url
第一次請求空地址 自然得不到任何數據 然後ajax將其作爲接收的值了 因此success和error都無法拿到任何數據

解決方法

用preventDefault()取消submit按鈕的默認事件即可

form.addEventListener("submit",function(e){
	e.preventDefault(); // 阻止默認表單提交
	mui.ajax("http://000,000,000,000:1234/api/demo",{
		data:{
			username:表單值,
			password:表單值,
		},
		dataType:'json',
		type:'post',
		timeout:10000,
		headers:{'Content-Type':'application/json'},	              
		success:function(data){
			console.log(data);
		}
	})
})

當然 方法不止一種 其它可以取消默認事件的方法都可以 比如將按鈕的類型改爲button 然後不監聽表單的submit 而是監聽按鈕的點擊
只要使其不經過form的提交即可

---