chrome缓存导致死循环事件

Posted 2020-10-16

在编写登录页面的时候，由于登录角色不同，所以需要展示不同数量的input输入框。这时候给账号对应的输入框绑定onblur事件，根据返回值查询到的用户信息选择加载不同数量的输入框。动作完成后第一次登陆没有问题，登陆后根据浏览器的提示先择保存用户名和密码。当退出登录后，再次打开登陆页面，chrome浏览器会自动加载已保存的用户名和密码。此时会出现死循环现象，循环调用onblur事件，不停访问后台，造成死循环。解决办法：将所有数量的input输入框全部加载完毕，将暂时用不到的设置为隐藏域，根据onblur事件返回值动态的更改input属性，而不是添加整个input输入框。通过样式控制input的展示与隐藏可解决问题。

问题代码如下：

　　

<form action="/logindemo/login">
username: <input type="text" name="username" id="username"><br>
password: <input type="password" name="password" id="password"><br>
<div id="div"></div>
<input type="submit" value="LOGIN" >
</form>
<script type="text/javascript">

$(function(){
$("#username").blur(function(){
var username = $("#username").val();
console.log("username: " + username);
$.post("/logindemo/checkemail",{"username":username},function(data){
console.log("data: " + data);
if(data == 1){
$("#div").empty();
$("#div").append(‘<input type="text"><br>‘);
}else{
$("#div").empty();
}
})
})
})

</script>

 

解决对策为：

　　

<form action="/logindemo/login">
username: <input type="text" name="username" id="username"><br>
password: <input type="password" name="password" id="password"><br>
<input type="text" id="div" style="display: none;"><br>
<input type="submit" value="LOGIN" >
</form>
<script type="text/javascript">

$(function(){
$("#username").blur(function(){
var username = $("#username").val();
console.log("username: " + username);
$.post("/logindemo/checkemail",{"username":username},function(data){
console.log("data: " + data);
if(data == 1){
// 需要该input输入框
$("#div").attr("style","")
}else{
// 不需要该input输入框
$("#div").attr("style","display: none;")
}
})
})
})

</script>