关于form表单在ajax中return false仍然提交的内容

本文介绍了两种常见的表单提交方式:使用onsubmit事件及通过普通按钮触发提交,并讨论了如何利用JavaScript进行表单验证,确保只有在验证通过的情况下才提交表单。此外,还涉及了使用Ajax获取数据时的注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在实现form表单的时候,我们往往会有一些需求,就是对表单数据进行验证,再决定是否提交表单内容。

而默认的form表单的默认事件,就是提交表单内容,那么应该如何进行判断呢?


通常有两种写法,原理都一样,只是习惯不同,一种就是form的 onsubmit事件,另一种则去掉input  type='submit'这个默认提交按钮,改成一个普通的button来执行提交事件(你会发现如果你改成button或者  input  type=button 它还是会提交数据 )。


另外在提一下,如果使用KindEditor编辑器或其他插件的时候,出现必须使用input type='submit'才能正常显示的情况,此时就不要在提交按钮中添加事件,而是在form的onsubmit事件中处理,为了兼容插件和我们的逻辑


例如:


<form action="index.html" method="post" name="form" id="form">
	
	<button onclick="check()">提交</button>
	
</form>
<script>
	function check()
	{
		
		$('#form').submit(function(){return false;});// true为提交
		
	}
	
</script>


另一种写法是用onsubmit,其实都是一样的,只是写法不同,个人习惯
<form action="index.html" method="post" name="form" id="form" onsubmit="return check()">
	
	<pre name="code" class="javascript"><button >提交</button>
</form><script>function check(){return false;}</script>



当我们用ajax去获取后台数据并做一些表单验证的时候,会发现return false没有用,

看看平时的写法:


function  xxx()

{

$.ajax({

success:function(data)

{

if(data.flag)

{

return true  / false;//返回的内容并不是被onsubmit所接收,而是xxx这个function,所以需要另外借住一个变量来接收这个标志(true or false)再在$.ajax()外return 给onsubmit


}

}



})



}


有时候我们通过$('xxx').submit()提交表单数据,要注意,在此之前文档已经加载完毕,所以建议把script文件或内容放到文档最后而不是放在head标签内部。这样就不用担心会因为文档没有加载而导致出现 xxx  undefind的错误


在Java Web开发中,可以使用AJAX进行异步提交form表单,具体实现步骤如下: 1. 在JSP页面中添加form表单,设置id属性和action属性,例如: ``` <form id="myForm" action="submitForm.do" method="post"> <input type="text" name="username"> <input type="text" name="password"> <button type="submit">提交</button> </form> ``` 2. 在JSP页面中引入jQuery库,例如: ``` <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 3. 使用jQuery的$.ajax方法异步提交form表单,例如: ``` $(document).ready(function() { $('#myForm').submit(function() { $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: $(this).serialize(), success: function(data) { alert('提交成功'); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert('提交失败'); } }); return false; }); }); ``` 其中,$(this).serialize()方法可以将表单数据序列化为字符串,方便传递给后台处理。success和error回调函数分别处理提交成功和提交失败的情况。 4. 在Java后台代码中处理form表单数据,例如: ``` @RequestMapping(value="/submitForm", method=RequestMethod.POST) @ResponseBody public String submitForm(HttpServletRequest request) { String username = request.getParameter("username"); String password = request.getParameter("password"); // 处理表单数据 return "success"; } ``` 其中,@RequestMapping注解设置了请求路径和请求方法,@ResponseBody注解表示返回值直接作为响应体输出,不需要经过视图解析器处理。 通过以上步骤,就可以实现AJAX异步提交form表单了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值