使用ajax登录验证，第一次点击登录按钮无反应，第二次点击才能正常运行。

2022-01-29 20:02:35 阅读：174 来源： 互联网

标签：xmlhttp 登录 ajax 点击 nbsp var password type

问题描述：

使用ajax进行登录验证时，第一次点击登录按钮无反应，第二次点击才能进去。

解决方法：

原来的代码

<form action="" method="post">
<span>&nbsp;账号:&nbsp;</span>
<div class="layui-inline">
<input type="text" placeholder="请输入" name="username" id="username" class="layui-input"/>
</div>
<span>&nbsp;密码:&nbsp;</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>&nbsp;账号:&nbsp;</span>
<div class="layui-inline">
<input type="text" placeholder="请输入" name="username" id="username" class="layui-input"/>
</div>
<span>&nbsp;密码:&nbsp;</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

标签：xmlhttp,登录,ajax,点击,nbsp,var,password,type
来源： https://www.cnblogs.com/ljq20204136/p/15855690.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用ajax登录验证，第一次点击登录按钮无反应，第二次点击才能正常运行。