完美解决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的提交即可

---