问题描述:
使用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