代码之家 › 专栏 › 技术社区 › Javad Hamashbouri

不显示ajax警报

wordpress ajax jquery html

Javad Hamashbouri · 技术社区 · 1 年前

我试图在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');

1 回复 | 直到 1 年前

Bharat Sharma 1 年前

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

表单处理:您的loginForm具有method=“post”属性,但它应该在标签中,而不是标签中。

排队JavaScript:您应该使用wp_enqueue_script而不是wp_enqueues_style来包含您的JavaScript文件。此外,请确保使用wp_localice_script将AJAX URL和任何本地化数据传递到您的JavaScript文件。

处理AJAX请求:确保您的WordPress functions.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(documents).ready。已将数据类型更正为datatype。将ajaxurl用于AJAX请求URL,当您本地化脚本时,WordPress会自动提供该URL。 Enqueue脚本:

使用wp_enqueue_script for JavaScript和wp_localice_script将AJAX URL传递给脚本。 PHP处理程序:

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