问题描述：

使用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

使用ajax登录验证，第一次点击登录按钮无反应，第二次点击才能正常运行。的更多相关文章

  1. MUI - IOS系统，相册选择照片后，点击确定按钮无反应

    MUI框架下使用 plus.gallery.pick 时,选择好照片之后,点击确定按钮无反应(既没报错,也没正确执行成功或失败后的回调方法).这是在做测试时,其中有两台苹果机上出现的bug.做了调试也 ...

  2. Django 登录验证-自动重定向到登录页

    Web项目有些场景需要做用户登录验证,以便访问不同页面. 方法一:login_required装饰器 适用于函数视图. from django.contrib.auth.decorators impo ...

  3. swfupload在chrome中点击上传图片按钮无反应的解决办法

    chrome 22.0.XXXXX dev版上传图片按钮点击无反应原因:是GOOGLE的内建Flash PPAPI外挂所导致的. 问题原因: 由于Google浏览器(Chrome),在最新测试版22. ...

  4. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  5. vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  6. 安装ectouch点击安装按钮无反应

    首先按F12: 看看”控制台“或者”网络“是否说找不到页面404 如果出现404,则是/mobile/index.php?m=install&c=index&a=importing方法 ...

  7. win10 点击开始按钮无反应

    本人亲身经历 由于安装软件时需要注册表权限,在一顿猛如虎的操作下,将注册表中 HKEY_CURRENT_USER 的权限出问题.而导致无法打开 开始菜单 ----------------以下是本人为了 ...

  8. python装饰器 & flask 通过装饰器 实现 单点登录验证

    首先介绍装饰器,以下是一段标注了特殊输出的代码.用于帮助理解装饰器的调用过程. import time def Decorator_one(arg1): info = "\033[1;31; ...

  9. Linux登录验证机制、SSH Bruteforce Login学习

    相关学习资料 http://files.cnblogs.com/LittleHann/linux%E4%B8%AD%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95%E8%AE% ...

  10. 客户端登录验证 －－ ESFramework 4.0 快速上手（15）

    在之前版本的Rapid引擎中,是没有提供客户端登陆验证的机制的,如果要验证用户的帐号密码信息,我们只有自己手动通过自定义信息来实现.在2011.04.25发布的新版本中,客户端Rapid引擎,则内置了 ...

随机推荐

  1. 分布式（CAP）

    1. Consistency  ------->C---------->一致性[写操作之后的读操作,必须返回该值] 2. Availability-------->A-------- ...

  2. Obfuscated Gradients Give a False Sense of Security: Circumventing Defenses to Adversarial Examples

    目录 概 主要内容 Obfuscated Gradients BPDA 特例 一般情形 EOT Reparameterization 具体的案例 Thermometer encoding Input ...

  3. Are Loss Functions All the Same?

    目录 概 主要内容 一些假设 损失函数 损失函数的统计性质 收敛速度 分类的界 Rosasco L, De Vito E, Caponnetto A, et al. Are loss function ...

  4. Dimension reduction in principal component analysis for trees

    目录 问题 重要的定义 距离 支撑树 交树 序 tree-line path 重要的性质 其它 Alfaro C A, Aydin B, Valencia C E, et al. Dimension ...

  5. 小程序中使用、H5、uniapp下使用阿里巴巴iconfront图标或者新增图标

    第一步:登录iconfont的账号,创建项目. 第二步:选择自己需要的图标,并添加入库(就是那个购物车的图标). 第三步:将选好的图片添加到项目.(点击上图中右上角的购物车图标). 第四步:下载资源到 ...

  6. EDP转LVDS屏转接板方案|基于INTELX86主板和商显应用EDP转LVDS设计CS5211

    众所周知LVDS接口是美国NS美国国家半导体公司为克服以TTL电平方式传输宽带高码率数据时功耗大,电磁干扰大等缺点而研制的一种数字视频信号传输方式.由于其采用低压和低电流驱动方式,实现了低噪声和低功耗 ...

  7. Java练习习题，百钱买百鸡问题，用100文钱买鸡，公鸡5文钱一只，母鸡3文钱一只，小鸡3只1文钱

    需求说明: 用100文钱买鸡,公鸡5文钱一只,母鸡3文钱一只,小鸡3只1文钱,要求公鸡.母鸡.小鸡都必须要有,刚好用完100文钱,公鸡.母鸡.小鸡的数量之和也是100. public class te ...

  8. 初识python： xml 操作

    导入模块: import xml.etree.ElementTree as ET 创建xml文件: new_xml = ET.Element("namelist") # 创建根节点 ...

  9. Flask_cookie和session（五）

    一.cookie和session介绍 cookie 在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现 ...

  10. java 短路与（||）时报错The operator || is undefined for the argument type(s) int, boolean

    今天在使用短路与时,报错The operator || is undefined for the argument type(s) int, boolean 代码如下: 最后发现是少了一个=,比较要使 ...