WordPress插件登录表单AJAX提示弹窗不显示问题求助

问题描述 #

开发WordPress登录表单插件时，AJAX提交后的提示弹窗无法显示，怀疑是新版本WordPress与旧教程的差异导致，相关代码如下：

原代码展示 #

AJAX 代码 #

jQuery(document).reday(function ($) {

    $('#loginForm').on('submit', function (event) {

        event.preventDefault();
        let user_email = $('#userEmail').val();
        let user_password = $('#userPassword').val();
        let notify = $('.alert');
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'post',
            datatype: 'json',
            data: {
                action: 'app_auth_login',
                user_email: user_email,
                user_password: user_password

        },
        success: function (response) {},
        error: function (error) {
            if (error) {
                notify.addClass('alert-error');
                notify.append('<p>there is an error</P>');
                notify.css('display','block');
            }
        }
    });

 });

});

登录表单代码 #

<div class="auth-wrapper">
    <div class="alert" style="display:none;">

    </div>
    <div class="login-wrapper" method="post" id="loginForm">
        <form action="">

            <div class="form-row">
                <label for="userEmail">ایمیل :</label>
                <input type="text" name="userEmail" id="userEmail"></input>
            </div>
            <div class="form-row">
                <label for="userPassword">کلمه عبور :</label>
                <input type="text" name="userPassword" id="userPassword"></input>
            </div>
            <div class="form-row">
                <button name="submitLogin">ورود</button>
            </div>

        </form>

    </div>

</div>

脚本注册函数 #

<?php

function app_auth_load_assets()
{

    wp_register_style('app_auth_style', APP_AUTH_URL . 'assets/css/auth.css');
    wp_enqueue_style('app_auth_style');

    wp_register_style('app_auth_script', APP_AUTH_URL . 'assets/js/auth.js', ['jquery']);
    wp_enqueue_style('app_auth_script');

}

add_action('wp_enqueue_scripts', 'app_auth_load_assets');

短代码实现 #

<?php

function app_auth_login_handler($atts, $content = null)
{
    include APP_AUTH_TPL . "front/login.php";
}

function app_auth_register_handler($atts, $content = null)
{
    include APP_AUTH_TPL . "front/register.php";
}

add_shortcode('app_auth_login', 'app_auth_login_handler');
add_shortcode('app_auth_register', 'app_auth_register_handler');

问题排查与修复方案 #

1. 修正jQuery初始化拼写错误 #

原代码中jQuery(document).reday是拼写错误，正确应为ready，错误会导致整个JS逻辑无法执行：

// 修正后
jQuery(document).ready(function ($) {
    // ... 后续代码
});

2. 修正表单事件绑定目标错误 #

原HTML中id="loginForm"绑定在<div>标签上，而表单提交事件应该绑定在<form>标签上，将ID移到form标签：

<div class="auth-wrapper">
    <div class="alert" style="display:none;"></div>
    <div class="login-wrapper">
        <!-- 把id移到form标签 -->
        <form action="" method="post" id="loginForm">
            <!-- ... 表单内容 -->
        </form>
    </div>
</div>

3. 修正脚本注册函数错误 #

注册JS脚本时误用了样式注册函数wp_register_style/wp_enqueue_style，应替换为脚本专用函数，同时传递正确的AJAX URL到前端：

<?php

function app_auth_load_assets()
{
    wp_register_style('app_auth_style', APP_AUTH_URL . 'assets/css/auth.css');
    wp_enqueue_style('app_auth_style');

    // 修正为wp_register_script和wp_enqueue_script
    wp_register_script('app_auth_script', APP_AUTH_URL . 'assets/js/auth.js', ['jquery'], false, true);
    // 传递AJAX URL到前端JS
    wp_localize_script('app_auth_script', 'AppAuth', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
    wp_enqueue_script('app_auth_script');
}

add_action('wp_enqueue_scripts', 'app_auth_load_assets');

4. 完善AJAX请求与弹窗逻辑 #

• 使用本地化传递的AJAX URL，避免路径错误
• 清空弹窗内容后再添加新消息，避免重复
• 完善success和error的处理逻辑：

jQuery(document).ready(function ($) {
    $('#loginForm').on('submit', function (event) {
        event.preventDefault();
        let user_email = $('#userEmail').val();
        let user_password = $('#userPassword').val();
        let notify = $('.alert');

        // 重置弹窗状态
        notify.removeClass('alert-error').hide().empty();

        $.ajax({
            url: AppAuth.ajax_url, // 使用本地化的URL
            type: 'post',
            dataType: 'json', // 修正大小写（原datatype应为dataType）
            data: {
                action: 'app_auth_login',
                user_email: user_email,
                user_password: user_password
            },
            success: function (response) {
                if (response.success) {
                    // 登录成功逻辑，比如跳转或提示
                    notify.append('<p>登录成功！</p>').show();
                } else {
                    notify.addClass('alert-error').append('<p>' + response.message + '</p>').show();
                }
            },
            error: function () {
                notify.addClass('alert-error').append('<p>请求出错，请稍后重试</p>').show();
            }
        });
    });
});

5. 添加PHP端AJAX回调函数 #

原代码缺少app_auth_login的AJAX处理函数，导致请求无响应，需添加：

<?php

// 处理登录AJAX请求（未登录用户）
add_action('wp_ajax_nopriv_app_auth_login', 'app_auth_login_process');
// 处理登录AJAX请求（已登录用户）
add_action('wp_ajax_app_auth_login', 'app_auth_login_process');

function app_auth_login_process() {
    $user_email = sanitize_email($_POST['user_email']);
    $user_password = $_POST['user_password'];

    // 验证用户
    $user = wp_authenticate($user_email, $user_password);

    if (is_wp_error($user)) {
        wp_send_json_error(['message' => $user->get_error_message()]);
    } else {
        // 登录用户
        wp_set_current_user($user->ID);
        wp_set_auth_cookie($user->ID);
        wp_send_json_success(['message' => '登录成功']);
    }

    wp_die(); // 必须添加，结束AJAX请求
}

6. 补充表单安全验证（可选但推荐） #

在表单中添加nonce字段，提升安全性：

<form action="" method="post" id="loginForm">
    <?php wp_nonce_field('app_auth_nonce', 'app_auth_nonce'); ?>
    <!-- ... 其他表单字段 -->
</form>

同时在AJAX数据中传递nonce：

data: {
    action: 'app_auth_login',
    app_auth_nonce: $('#app_auth_nonce').val(), // 添加这行
    user_email: user_email,
    user_password: user_password
},

内容的提问来源于stack exchange，提问作者Javad Hamashbouri