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

吾自敛之

于 2022-09-09 12:44:25 发布

阅读量591

点赞数

文章标签： javascript jquery ajax

本文链接：https://blog.csdn.net/m0_62639693/article/details/126780590

版权

本文记录了如何使用jQuery AJAX的beforeSend回调函数处理登录请求，以及实现键盘回车触发登录的功能。通过示例代码详细展示了两种登录事件的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

比较有意思的地方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)
                //判断按下的键值是不是回车键的值13
                if("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)
                //判断按下的键值是不是回车键的值13
                if("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="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>