问题描述：

使用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】999. Available Captures for Rook 解题报告（C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力遍历 日期 题目地址:https://leetc ...

  2. Ubuntu安装Git及Git配置

    1.检查Git是否已经安装 使用git version,若不显示版本号则Git未安装,下面是我安装好后显示的版本号 2.安装Git sudo apt-get install git Centos使用y ...

  3. 在linux(deepin)系统下查看当前ip地址与用户名

    在linux(deepin)系统下查看当前ip地址与用户名 查看当前ip地址 方式一: hostname -I 方式二: ifconfig -a 如下图所示: 其中192.168.11.66即为当前系 ...

  4. Zookeeper集群安装(开启kerberos)

    安装规划 zookeeper集群模式,安装到如下三台机器 10.43.159.237 zdh-237 10.43.159.238 zdh-238 10.43.159.239 zdh-239 Kerbe ...

  5. Zookeeper集群安装Version3.5.1

    Zookeeper集群安装,基于版本3.5.1, 使用zookeeper-3.5.1-alpha.tar.gz安装包. 1.安装规划 zookeeper集群模式,安装到如下三台机器 10.43.159 ...

  6. 新来的实习生测post接口老漏测，搞清楚原理再执行真的很重要

    ​一.GET方法和POST方法传递数据的异同  一.GET方法和POST方法传递数据的异同 http请求方法get和post是最常被用到的两个方法,get常用于向服务器请求数据,post常用于提交数据 ...

  7. WPF 使用 Silk.NET 进行 DirectX 渲染入门

    本文告诉大家如何使用 dotnet 基金会新开源的 Silk.NET 库调用 DirectX 进行渲染的方法.此库是对 DirectX 的底层基础封装,用上了 dotnet 和 C# 的各个新特性,相 ...

  8. win10 安装vue 详解-包括node.js、npm、webpack

    1.下载 去官网下载 node.js https://nodejs.org/en/download/ 一般不会选择最新的,我安装的是 12.18.4 进入历史记录页面网址 https://nodejs ...

  9. PPT2010制作充电动画

    原文: https://www.toutiao.com/i6492264647318569486/ 启动PPT2010,新建一张空白幻灯片 选择"插入"选项卡,"插图&q ...

  10. atroot 的个人博客

    我的个人博客 左上角 MENU 打开导航菜单! 向下滚动查看内容! 为啥我要坚持更新博客 周围有很多小伙伴在问,你写博客会有人看嘛?如果没人看,那岂不是写的就没有意义了吗? 这个问题也一度让我陷入是否 ...