使用ajax登录验证或注册,第一次点击登录按钮无反应,第二次点击才能进去

发布于:2025-03-16 ⋅ 阅读:(18) ⋅ 点赞:(0)

我的问题正如标题所见,点击一次无效,再点一次就好了。

这是我原来的代码:

<div class="login-form">
	<p>New user?<a href="register.html">Register here!</a></p>
	<form>
		<div class="form-text">
			<input type="text" id="username" class="text" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}" >
			<input type="password" id="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
		</div>
		<input type="submit" id="submit" value="登录" >
	</form>
</div>

这是我修改后的代码:

<div class="login-form">
	<p>New user?<a href="register.html">Register here!</a></p>
	<div class="form-text">
		<input type="text" id="username" class="text" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}" >
		<input type="password" id="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
	</div>
	<input type="submit" id="submit" value="登录" >
</div>

可以看到,我把form标签删了。

产生这个问题的原因是:我们点击登录后,form会默认提交表单,服务器响应后会刷新页面,根本就没有执行我们写的 JavaScript  代码。

如果页面中有一些初始化的 JavaScript 代码或者事件绑定逻辑依赖于页面加载完成后执行,而第一次点击提交时,这些逻辑还未完全准备好,就可能导致第一次点击无效。第二次点击时,页面已经完成了初始化,所以点击有效。

这个结论从下面的例子也能证明:

就是我先故意没写用户名和密码提交一次,提交这一次后,下一次再提交就是有效的。原因其实就是我们故意提交的那次错误,页面完成了初始化。

还有,如果我们提交了一次,以后无论提交多少次都行,这也能证明了是因为没有初始化而导致我们第一次提交没有效果。

结论:form标签的锅,以后使用的时候要多加小心。