jQuery的ajax方法里的success方法第一次不执行,第二次才执行的问题

最近写了一个form表单提交功能,用jQuery的ajax方法实现,第一次提交时,success里的方法并没有执行,第二次提交就行了,当然后端是能正常执行的,只是前端有问题。解决办法如下:

				$('#btnSubmit').click(function() {
					
					var username = $("input[name='username']").val();
					var password = $("input[name='password']").val();
					var validateCode = $("input[name='validateCode']").val();
					var remember_me = $("input[name='remember_me']").is(':checked');

					$.ajax({
						type: "post",
						url: ctx + "user/login",
						data: {
							"username": username,
							"password": password,
							"validateCode": validateCode,
							"remember_me": remember_me
						},
						success: function(r) {
							if (r.code == 0) {
								location.href = ctx;
							} else if(r.code == 301){
								$('.imgcode').click();
								$('.validateCode').val("");
								alert(r.msg);
								
							} else if(r.code == 500) {
								$('.username').val("");
								$('.password').val("");
								alert(r.msg);
								
							}
							
						}
					});
					return false;	//禁止提交表单
				});

注意最后一行代码,即return false;这条代码一定要加上,为了禁止提交表单。

当然,还有一种解决办法,将form表单里的button标签的 type=submit 改为 type=button。如下图所示: 

原理:

在表单中的button默认类型是submit,如果你触发ajax请求的是button,而你的button又在表单中,那么在你发送请求后,在执行success回调方法之前会提交表单,如果我们好好了解一下表单和ajax请求区别的话,可以知道表单是要刷新整个界面的,所以当你发送请求后,会提交表单,这时候你的界面就不是你之前的界面了,所以我们要让他发完请求后不要提交表单,也就是用return false终止。既然我们知道了原理,那我们也大可以这样,把button从表单拿出来,或者说不需要表单你就干脆把表单删了,反正你是ajax请求,再不济你就设置button的类型不是submit就好了。

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值