不显示ajax警报

Question

我正在尝试在 WordPress 中添加一个登录表单作为插件 但我有一个关于 ajax 的问题，即不显示警报 我认为旧版本的 WordPress 是不同的，因为我从一个关于 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>

注册js的函数

<?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');

Answer 1

问题和修复 AJAX 脚本错误：您的 jQuery 代码有一个拼写错误：jQuery(document).reday 应该是 jQuery(document).ready。另外，数据类型应该是 dataType。

表单处理：您的loginForm具有method =“post”属性，但它应该位于标签中，而不是标签中。

入队 JavaScript：您应该使用 wp_enqueue_script 而不是 wp_enqueue_style 来包含您的 JavaScript 文件。另外，请确保使用 wp_localize_script 将 AJAX URL 和任何本地化数据传递到您的 JavaScript 文件。

处理 AJAX 请求：确保您的 WordPress function.php 或插件文件中有一个处理程序来处理 AJAX 请求。

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

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

    $.ajax({
        url: ajaxurl, // 'ajaxurl' is provided by WordPress
        type: 'post',
        dataType: 'json',
        data: {
            action: 'app_auth_login',
            user_email: user_email,
            user_password: user_password
        },
        success: function (response) {
            if (response.success) {
                notify.removeClass('alert-error').addClass('alert-success').text('Login successful').show();
            } else {
                notify.removeClass('alert-success').addClass('alert-error').text(response.data.message).show();
            }
        },
        error: function () {
            notify.removeClass('alert-success').addClass('alert-error').text('There was an error').show();
        }
    });

});

});

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('app_auth_script', APP_AUTH_URL . 'assets/js/auth.js', ['jquery'], null, true);
wp_enqueue_script('app_auth_script');

// Make sure to localize script to pass AJAX URL
wp_localize_script('app_auth_script', 'app_auth_vars', [
    'ajax_url' => admin_url('admin-ajax.php')
]);

}

add_action('wp_enqueue_scripts', 'app_auth_load_assets');

function app_auth_login() {
// Check nonce for security
// if ( !isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'app_auth_nonce') ) {
//    wp_send_json_error(['message' => 'Invalid nonce']);
//    return;
// }

// Retrieve email and password from AJAX request
$email = sanitize_email($_POST['user_email']);
$password = sanitize_text_field($_POST['user_password']);

$user = wp_authenticate($email, $password);

if (is_wp_error($user)) {
    wp_send_json_error(['message' => $user->get_error_message()]);
} else {
    wp_set_auth_cookie($user->ID);
    wp_send_json_success();
}

}

add_action('wp_ajax_app_auth_login', 'app_auth_login'); add_action('wp_ajax_nopriv_app_auth_login', 'app_auth_login');

说明 JavaScript 更改：

将 jQuery(document).reday 更改为 jQuery(document).ready。 将数据类型更正为 dataType。 使用 ajaxurl 作为 AJAX 请求 URL，该 URL 在您本地化脚本时由 WordPress 自动提供。 入队脚本：

使用 JavaScript 的 wp_enqueue_script 和 wp_localize_script 将 AJAX URL 传递到您的脚本。 PHP 处理程序：

添加了错误检查和用户身份验证。 使用 wp_send_json_success() 和 wp_send_json_error() 进行正确的 AJAX 响应处理。 通过这些更改，您的 AJAX 登录表单应该可以正常工作，并根据登录尝试的成功或失败向用户提供反馈。