问题描述：

使用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. 【LeetCode】75. Sort Colors 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 计数排序 双指针 日期 题目地址:https://l ...

  2. Another kind of Fibonacci(hdu3306)

    Another kind of Fibonacci Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  3. Chapter 3 Observational Studies

    目录 概 3.1 3.2 Exchangeability 3.3 Positivity 3.4 Consistency First Second Fine Point 3.1 Identifiabil ...

  4. <数据结构>XDOJ323.判断有向图中是否有环

    问题与解答 问题描述 判断有向图中是否有环. 输入格式 输入数据第一行是一个正整数,表示n个有向图,其余数据分成n组,每组第一个为一个整数,表示图中的顶点个数n,顶点数不超过100,之后为有向图的邻接 ...

  5. 【jvm】05-为什么你写的代码有时候和预期不一致

    [jvm]05-为什么你写的代码有时候和预期不一致 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请 ...

  6. 乌龟NOI

    题目描述 一只乌龟由于智商低下,它只会向左或向右走,不过它会遵循主人小h的指令:F(向前走一步),T(掉头). 现在小h给出一串指令,由于小h有高超的计算能力,他可以马上知道乌龟最后走到哪里.为了难倒 ...

  7. hisql 高级功能数据检测将错误数据拦截在系统外 一

    hisql github源码下载 git clone https://github.com/tansar/HiSql.git 在设计第二范式数据库时经常会把可能重复的数据单独做一种表关联,但是在写入表 ...

  8. vs2017 快捷键 - 总结

    1.格式化代码 先选中需要格式的代码,一般是全选[Ctrl+A]后,Ctrl+K+F[按定Ctrl不动,依序点击 K和F,然后再放开 Ctrl ] 2.多行注释 注释: 先CTRL+K,然后CTRL+ ...

  9. JSch Algorithm negotiation fail

    https://stackoverflow.com/questions/30846076/jsch-algorithm-negotiation-fail As you can see, the ser ...

  10. ANT之macrodef

    macrodef 的意思是宏定义, 可以理解为自定义函数. 对于大型部署,可以提高代码利用率. 为了方便理解,请看代码示例: <macrodef name="macro-send-fi ...