登录页面添加回车和单击登录事件 jQuery.ajax中的 beforeSend:function () 回调函数【日常记录】

比较有意思的地方1：实现如下功能可以两种方法

用jQuery.ajax中的 beforeSend:function () 回调函数：如下（下方有全部代码案例）

 beforeSend:function () {//当ajax向后台发送请求之前，会自动执行本函数；//该函数的返回值能够决定ajax是否真正向后台发送请求：//如果该函数返回true,则ajax会真正向后台发送请求；否则，如果该函数返回false，则ajax放弃向后台发送请求。jQuery("#msg").text("正在努力验证....");return true;}

直接写在点击事件的内容中，在发送aiax之前：如下（下方有全部代码案例）

// 显示正在验证,在此写在beforeSend方法中，此处就不写了
// 2000毫秒后显示正在验证
// setTimeout(jQuery("#msg").text("正在努力验证...."), 2000);

比较有意思的地方2：实现键盘回车登录，我试着把键盘上每个键值都打出来玩了一下 ；

jQuery(function () {//给页面添加回车登录事件jQuery(window).keydown(function(event){//打印键盘的码值// console.log(event.keyCode)//判断按下的键值是不是回车键的值13if("13" == event.keyCode){//调用登录单击事件jQuery("#loginBtn").click();}})

如下是登录页面的全部代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head><base href="<%=basePath%>"><meta charset="UTF-8"><link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script><script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script><script type="text/javascript">jQuery(function () {//给页面添加回车登录事件jQuery(window).keydown(function(event){//打印键盘的码值// console.log(event.keyCode)//判断按下的键值是不是回车键的值13if("13" == event.keyCode){//调用登录单击事件jQuery("#loginBtn").click();}})//给"登录"按钮添加单击事件jQuery("#loginBtn").click(function () {var loginAct = jQuery.trim(jQuery("#loginAct").val());var loginPwd = jQuery.trim(jQuery("#loginPwd").val());var isRemPwd = jQuery("#isRemPwd").prop("checked");//表单验证if (loginAct == "" || loginAct == null) {alert("用户名不能为空")return;}if (loginPwd == "" || loginPwd == null) {alert("密码不能为空")return;}// 显示正在验证,在此写在beforeSend方法中，此处就不写了// 2000毫秒后显示正在验证// setTimeout(jQuery("#msg").text("正在努力验证...."), 2000);//发送请求jQuery.ajax({url:'settings/qx/user/login.do',data:{loginAct:loginAct,loginPwd:loginPwd,isRemPwd:isRemPwd},type:'post',dataType:'json',success:function (data) {if(data.code=="1"){//跳转到业务主页面window.location.href="workbench/index.do";}else {//提示信息jQuery("#msg").html("<a style='color: red'>" + data.message + "</a>");}},beforeSend:function () {//当ajax向后台发送请求之前，会自动执行本函数；//该函数的返回值能够决定ajax是否真正向后台发送请求：//如果该函数返回true,则ajax会真正向后台发送请求；否则，如果该函数返回false，则ajax放弃向后台发送请求。jQuery("#msg").text("正在努力验证....");return true;}})});});</script>
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px; width: 60%;"><img src="data:image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
</div>
<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;"><div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">&copy;2022&nbsp;敛之</span></div>
</div><div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5"><div style="position: absolute; top: 0px; right: 60px;"><div class="page-header"><h1>登录</h1></div><form action="workbench/index.html" class="form-horizontal" role="form"><div class="form-group form-group-lg"><div style="width: 350px;"><input class="form-control" id="loginAct" type="text" placeholder="用户名"></div><div style="width: 350px; position: relative;top: 20px;"><input class="form-control" id="loginPwd" type="password" placeholder="密码"></div><div class="checkbox" style="position: relative;top: 30px; left: 10px;"><label><input type="checkbox" id="isRemPwd"> 十天内免登录</label>&nbsp;&nbsp;<span id="msg"></span></div><button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block"style="width: 350px; position: relative;top: 45px;">登录</button></div></form></div>
</div>
</body>
</html>

登录页面添加回车和单击登录事件 jQuery.ajax中的 beforeSend:function () 回调函数【日常记录】相关推荐

计算机弹不出用户登录,wifi登录页面跳不出来_wifi登录页面打不开怎么办？-192路由网...
很多用户,在设置WiFi路由器的时候,遇到WiFi登录页面打不开的问题,造成无法设置WiFi路由器. 当大家在设置wifi路由器的时候,遇到登录页面打不开的问题时,其原因主要有以下几个方面: 1.用户 ...
cas服务器登录页面添加验证码
本文的是以cas-4.1.5进行的,cas源代码下载官网:https://apereo.github.io/cas/4.2.x/index.html. 1.在cas工程的web.xml增加验证码功能的 ...
使用虚拟登录页面jsp，跳过登录页，直接访问主页面
最近在修改项目的一个模块,项目本身是java + springMVC开发的,重新用.net来写一个模块块,因此需要从主页面跳转到.net页面,再从.net页面返回登录成功的主页面,现总结如下: 跳转到 ...
用HTML做一个简单的web登录页面,简单的JavaWeb注册登录案例
简单的JavaWeb注册登录案例 1.注册页面register.html register 姓名: 电话: 邮箱: qq: 2.注册案例实现程序register.java /** * 注册案例实现程序 ...
Flutter 解决App登录页面软键盘遮挡住登录按钮或顶起底部控件的问题
文章目录 1 软键盘问题点对比效果图 2 解决软键盘将底部布局顶上去的问题 2.1 方式一:修改resizeToAvoidBottomInset属性 2.2 方式二:使用可滑动布局 3 弹出软键盘时滚 ...
在非登录页面提示用户还未登录
在网上找了很久,自己做一个统一. 首先在确定用户可以登录成功的时候将用户名保存起来, request.getSession().setAttribute("username", u ...
Vue —— 登录页面按enter键触发登录按钮事件
如果是用elementui框架中的 el-input 组件,那就可以直接在该组件标签上使用@keyup.enter.native鼠标enter事件如果没有使用vue框架中的组件去写的button登录 ...
Exchange_2016在OWA登录页面添加密码修改功能
常规部署的Exchange_2016系统的OWA界面中只有"登录"一个按钮,系统默认是开启了密码修改功能,但这个密码修改功能也只是在用户密码即将过期或已过期的情况下才会跳转至密码修 ...
管理员用户不同身份登录页面代码PHP,wordpress管理员登录和普通用户登录后跳转到不同页面-♚付涛纪实阁♚...
这篇文章将向您展示WordPress用户登录后如何重定向到指定页面或者文章的技巧. 一.重定向到网站管理面板. 将以下代码添加到您的当前主题的 functions.php 文件中二.重定向到指定页面 ...

登录页面添加回车和单击登录事件 jQuery.ajax中的 beforeSend:function () 回调函数【日常记录】

登录页面添加回车和单击登录事件 jQuery.ajax中的 beforeSend:function () 回调函数【日常记录】相关推荐

最新文章

热门文章