问题描述：

使用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. 【经验】 Java BigInteger类以及其在算法题中的应用

    [经验] Java BigInteger类以及其在算法题中的应用 标签(空格分隔): 经验 本来在刷九度的数学类型题,有进制转换和大数运算,故而用到了java BigInteger类,使用了之后才发现 ...

  2. 问题--ImportError: DLL load failed: 找不到指定的模块

    今天在运行别人的项目时出现了问题: ImportError: DLL load failed: 找不到指定的模块. 解决方法: 卸载后重新安装. 详情参考: Python报错:ImportError: ...

  3. Chapter 12 IP Weighting and Marginal Structural Model

    目录 12.1 The causal question 12.2 Estimating IP weights via modeling 12.3 Stabilized IP weights 12.4 ...

  4. MySQL百分比显示和显示前百分之几的方法

    前几天一个朋友让我帮忙写的,随手记录一下,感觉难度也不大,就是写的时候遇到一些问题.优化方便做得不太好.有好的优化方法欢迎分享!(数据库在文章结尾) 要求 1)查询所有时间内,所有产品销售金额占比,按 ...

  5. 制作登录页面，点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确

    查看本章节 查看作业目录 需求说明: 制作登录页面 点击键盘的 Enter 键或者单击"登录"按钮,验证用户输入的邮箱和密码是否正确 实现思路: 准备登录的静态页面 在页面中嵌入脚 ...

  6. iNeuOS工业互联网操作系统，增加DTU与平台实时交互的应用场景

    目       录 1.      概述... 2 2.      平台演示... 2 3.      硬件设置... 2 4.      应用过程... 3 1.   概述 DTU向下连接硬件传感器 ...

  7. 在本地开启了代理，postman可以正常发起外部请求，但Java代码却请求失败，已解决

    在本地开启了代理,postman可以正常发起外部请求,但Java代码却请求失败,已解决 现象:开了vpn访问公司服务器,postman可以正常发起服务器请求,但是java代码请求失败,连接超时.包括在 ...

  8. MySQL数据库安装Version5.5

    1.新建mysql用户 useradd -g hadoop -s /bin/bash -md /home/mysql mysql 创建.bash_profile,加载.bashrc 2.检查并且卸载系 ...

  9. shell2-if判断2

    1.条件判断if 判断条件:then //单分支语句 命令1 命令2fi 例子: #!/bin/bash ls if [ $? -eq 0 ]; then echo "执行成功了" ...

  10. python 迭代器链式处理数据

    pytorch.utils.data可兼容迭代数据训练处理,在dataloader中使用提高训练效率:借助迭代器避免内存溢出不足的现象.借助链式处理使得数据读取利用更高效(可类比操作系统的资源调控) ...