jquery异步提交显示遮罩层

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。异步提交是指在不刷新整个页面的情况下，通过 JavaScript 发送请求并处理响应。

类型

jQuery 异步提交通常使用 $.ajax() 方法来实现。该方法支持多种类型的请求，包括 GET、POST 等。

应用场景

表单提交：用户填写表单后，通过异步提交保存数据，无需刷新页面。
数据获取：从服务器获取数据并动态更新页面内容。
实时交互：实现用户与页面的实时交互，如聊天应用、实时更新等。

示例代码

以下是一个使用 jQuery 异步提交表单并显示遮罩层的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 异步提交示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
            padding-top: 20%;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <button type="submit">提交</button>
    </form>
    <div id="loading">正在处理...</div>

    <script>
        $(document).ready(function() {
            $('#myForm').submit(function(event) {
                event.preventDefault(); // 阻止表单默认提交行为

                // 显示遮罩层
                $('#loading').show();

                $.ajax({
                    url: 'submit.php', // 处理表单提交的服务器端脚本
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        // 处理成功响应
                        alert('提交成功：' + response);
                    },
                    error: function(xhr, status, error) {
                        // 处理错误响应
                        alert('提交失败：' + error);
                    },
                    complete: function() {
                        // 隐藏遮罩层
                        $('#loading').hide();
                    }
                });
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：遮罩层显示不明显或位置不正确

原因：可能是 CSS 样式设置不当。

解决方法：

#loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding-top: 20%;
    font-size: 24px;
    color: white;
    z-index: 9999; /* 确保遮罩层在最上层 */
}