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

问题描述：

使用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登录验证，第一次点击登录按钮无反应，第二次点击才能正常运行。的更多相关文章

MUI - IOS系统，相册选择照片后，点击确定按钮无反应
MUI框架下使用 plus.gallery.pick 时,选择好照片之后,点击确定按钮无反应(既没报错,也没正确执行成功或失败后的回调方法).这是在做测试时,其中有两台苹果机上出现的bug.做了调试也 ...
Django 登录验证-自动重定向到登录页
Web项目有些场景需要做用户登录验证,以便访问不同页面. 方法一:login_required装饰器适用于函数视图. from django.contrib.auth.decorators impo ...
swfupload在chrome中点击上传图片按钮无反应的解决办法
chrome 22.0.XXXXX dev版上传图片按钮点击无反应原因:是GOOGLE的内建Flash PPAPI外挂所导致的. 问题原因: 由于Google浏览器(Chrome),在最新测试版22. ...
js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框
效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...
安装ectouch点击安装按钮无反应
首先按F12: 看看”控制台“或者”网络“是否说找不到页面404 如果出现404,则是/mobile/index.php?m=install&c=index&a=importing方法 ...
win10 点击开始按钮无反应
本人亲身经历由于安装软件时需要注册表权限,在一顿猛如虎的操作下,将注册表中 HKEY_CURRENT_USER 的权限出问题.而导致无法打开开始菜单 ----------------以下是本人为了 ...
python装饰器 & flask 通过装饰器实现单点登录验证
首先介绍装饰器,以下是一段标注了特殊输出的代码.用于帮助理解装饰器的调用过程. import time def Decorator_one(arg1): info = "\033[1;31; ...
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% ...
客户端登录验证－－ ESFramework 4.0 快速上手（15）
在之前版本的Rapid引擎中,是没有提供客户端登陆验证的机制的,如果要验证用户的帐号密码信息,我们只有自己手动通过自定义信息来实现.在2011.04.25发布的新版本中,客户端Rapid引擎,则内置了 ...

随机推荐

CRB and His Birthday(hdu 5410)
CRB and His Birthday Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
TKE 用户故事 - 作业帮 PB 级低成本日志检索服务
作者吕亚霖,2019年加入作业帮,作业帮架构研发负责人,在作业帮期间主导了云原生架构演进.推动实施容器化改造.服务治理.GO微服务框架.DevOps的落地实践. 莫仁鹏,2020年加入作业帮,作业帮 ...
WebRTC下的 NAT 穿透技术
NAT的概念模型 NAT名字很准确,网络地址转换,就是替换IP报文头部的地址信息.NAT通常部署在一个组织的网络出口位置,通过将内部网络IP地址替换为出口的IP地址提供公网可达性和上层协议的连接能力. ...
C++ switch 语句的用法
C++ 判断一个 switch 语句允许测试一个变量等于多个值时的情况.每个值称为一个 case,且被测试的变量会对每个 switch case 进行检查. C++ 中 switch 语句的语法: ...
单芯片CS5265替代VL102+PS176|设计USB TYPEC转HDMI方案|替代VL102+PS176
一.PS176概述PS176是一个显示端口 (DP)至HDMI 2.0视频接口转换器适用于需要视频协议转换的电缆适配器.电视接收器.监视器和其他应用.它将接受任何显示端口输入格式,包括DP 1.1a. ...
使用JavaScript控制HTML元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
nginx 安装配置及使用启动权限拒绝问题
安装 yum install -y nginx 查看安装的路径 whereis nginx 可能会有所不同需要根据自己的查看执行目录:/usr/sbin/nginx 模块所在目录:/usr/lib ...
.NET 编码的基础知识
.NET 编码的一些基本概念和分析简单的类型概念 Hex (16进制) byte 字节范围是:0~255,二进制下的范围就是00000000~11111111,相当于1字节. byte[] 字节数 ...
js tab栏切换
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
hisql 与sqlsugar,freesql 数据插入性能测试
hisql与目前比较流行的ORM框架性能测试对比 hisql 一直定位为新一代的ORM框架为低代码开发而生测试数据数据库为sqlserver数据库测试源码地址hisql与sqlsugar fre ...

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

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

随机推荐

热门专题