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就好了。