使用ajax登录验证，第一次点击登录按钮无反应，第二次点击才能正常运行。
问题描述：
使用ajax进行登录验证时，第一次点击登录按钮无反应，第二次点击才能进去。
解决方法：
原来的代码
<form action="" method="post"> <span> 账号: </span> <div class="layui-inline"> <input type="text" placeholder="请输入" name="username" id="username" class="layui-input"/> </div> <span> 密码: </span> <div class="layui-inline"> <input type="text" placeholder="请输入" name="password" id="password" class="layui-input"/> </div> <button οnclick="user_login()">ajax</button> </form>
只要把action="" method="post"去掉
把button放form外面就行了
原因是form表单下的按钮在没有指定type类型的时候，button会有一个默认的type=”submit”
所以用ajax的时候不要在form加action
<form> <span> 账号: </span> <div class="layui-inline"> <input type="text" placeholder="请输入" name="username" id="username" class="layui-input"/> </div> <span> 密码: </span> <div class="layui-inline"> <input type="text" placeholder="请输入" name="password" id="password" class="layui-input"/> </div> </form> <button οnclick="user_login()">ajax</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录界面</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery-3.3.1.js"></script>
<style type="text/css">
.layui-layout-login {
width: 350px;
height: 300px;
margin: 10% auto 0 auto;
box-shadow: 2px 1px 10px 10px #eeeeee;
border-radius: 8px;
z-index: 10;
}
</style>
</head>
<body>
<div class="text" style="font-size:50px;font-weight:bold;margin-top:55px;height:10px;text-align:center;">河北金力集团公文流转系统</div>
<form class="layui-form layui-layout layui-layout-login" >
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>用户登录</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input id ="account" type="text" name="account" required lay-verify="required" placeholder="请输入账号"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input id="password" type="password" name="password" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">选择角色</label>
<div class="layui-input-inline">
<select id ="type" name="type" lay-verify="required" lay-search="">
<option value="1">系统管理员</option>
<option value="2">厂长</option>
<option value="3">副厂长</option>
<option value="4">办公室</option>
<option value="5">销售部</option>
<option value="6">财务部</option>
</select>
</div>
</div>
<br><br><br>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-btn-group">
<button class="layui-btn" lay-submit lay-filter="formDemo"onclick="fun()" >立即登录</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
<script>
/*function fun() {
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","LoginServlet",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var jsonObj= xmlhttp.responseText;//接收服务器传来的json对象
var data = JSON.parse( jsonObj );//解析json对象
if (data.toString()==1)
alert(data);
else
alert(data);
}
}
}*/
function fun1() {
//使用$.ajax()发送异步请求
var username = $("#account").val()
var password = $("#password").val();
var type = $("#type").val();
$.ajax({
url: "LoginServlet",
type: "GET",
data: {"account": username, "password": password, "type": type},
success: function (data) {
if (data == 1)
{alert("登录成功");
window.location.replace("index.html");}
else
{ alert("用户名或密码错误");
window.location.replace("login.html");
}
},//响应成功后的回调函数
error: function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType: "text"//设置接受到的响应数据的格式
});
}
function fun() {
var username = $("#account").val()
var password = $("#password").val();
if (username !=""&&password !="") {
fun1();
}
}
</script>
<script src="layui/layui.js"></script>
</body>
</html>
转载于:https://www.cnblogs.com/suledule/p/10695708.html
浙公网安备 33010602011771号