Создание пользовательской формы входа с использованием AJAX

13 нояб. 2013 г., 22:08:11
Просмотры: 18K
Голосов: 2

Я пытаюсь использовать этот туториал WordPress AJAX Login Without a Plugin – The Right Way от Natko Hasic для создания форм входа, регистрации и восстановления пароля, которые обрабатывают все, включая сообщения об ошибках через AJAX. Отличия между туториалом и моим проектом... Я не хочу делать это во всплывающем окне и реализую в плагине, а не в корневой папке темы.

Вот какой код у меня есть...

Код в шаблоне страницы:

<form name="login_form" id="login_form" class="login_form" action="" method="post">
    <p class="status"></p>

    <p>
        <input type="text" name="username" id="username" placeholder="Логин" />
    </p>

    <p>
        <input type="password" name="password" id="password" placeholder="Пароль" />
    </p>

    <button name="submit" id="submit" class="btn"><?php _e("Войти", "shorti"); ?></button>
    <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Забыли пароль?</a>

    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>

</form>

Код в основном файле моего плагина .php:

 <?php // PHP скрипт, который я пытаюсь запустить

    add_action( 'init', 'ajax_login_init' );
    function ajax_login_init() {

        wp_register_script( 'ajax-login-script', plugin_dir_url( __FILE__ ) . 'js/ajax-login-script.js', array('jquery') );
        wp_enqueue_script( 'ajax-login-script' );

        wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'redirecturl' => home_url(),
            'loadingmessage' => __( 'Отправка данных пользователя, пожалуйста подождите...' )
        ));

        // Разрешаем пользователям без привилегий выполнять ajax_login() через AJAX
        add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
    }

    // Проверяем корректность введенных пользователем данных
    function ajax_login() {
        // Сначала проверяем nonce, если проверка не пройдена - функция прервется
        check_ajax_referer( 'ajax-login-nonce', 'security' );

    // Nonce проверен, получаем POST данные и авторизуем пользователя
    $info = array();
        $info['user_login'] = $_POST['username'];
        $info['user_password'] = $_POST['password'];
        $info['remember'] = true;

    $user_signon = wp_signon( $info, false );
    if ( is_wp_error( $user_signon )) {
        echo json_encode( array( 'loggedin'=>false, 'message'=>__( 'Неверный логин или пароль!' )));
    } else {
        echo json_encode( array( 'loggedin'=>true, 'message'=>__('Авторизация успешна, перенаправление...' )));
    }

    die();
}

Содержимое моего файла ajax-login-script.js:

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

    // Выполняем AJAX авторизацию при отправке формы
    $('form#login_form').on('#submit', function(e){
        $('form#login_form p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', // вызывает wp_ajax_nopriv_ajaxlogin
                'username': $('form#login_form #username').val(), 
                'password': $('form#login_form #password').val(), 
                'security': $('form#login_form #security').val() },
            success: function(data){
                $('form#login_form p.status').text(data.message);
                if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });
});

Я совсем не знаком с AJAX и JS, поэтому любая помощь будет очень ценной!

6
Комментарии

Так что именно не работает?

eskimo eskimo
13 нояб. 2013 г. 23:26:39

@eskimo: Если отправить форму с пустыми полями или неверными данными, она просто перезагружает страницу, а если ввести корректные данные, страница тоже перезагружается, по-прежнему показывая форму входа вместо фактической информации страницы. Как я уже сказал, это практически мой первый опыт работы с JS/AJAX... так что я даже не знаю, с чего начать поиск проблемы. Спасибо

Designer 17 Designer 17
14 нояб. 2013 г. 00:01:41

Я не читал весь туториал, но первое, что я заметил — у вас пустой атрибут action (action=""), а в туториале указано action="login". Мне кажется, это критически важный момент, который нужно исправить.

eskimo eskimo
14 нояб. 2013 г. 00:50:51

@eskimo: да, я добавил это, но когда я использовал форму, она перенаправляла меня на текущую страницу с расширением /login, что возвращало ошибку 404. Не уверен, можно ли это считать прогрессом :P

Designer 17 Designer 17
14 нояб. 2013 г. 01:00:02

404 — это нормально, так как страница login не существует. Но форма не должна вести на эту страницу, а должна отправляться. Я нашёл ещё одну ошибку, которая тоже критична. В файле ajax-login-script.js у вас есть строка $('form#login_form').on('#submit', function(e). Удалите символ '#' перед submit. И убедитесь, что в коде формы указано action="login".

eskimo eskimo
14 нояб. 2013 г. 11:30:15

@eskimo: Наконец-то вернулся к этой части проекта, исправил указанные ошибки — теперь всё работает отлично! Огромное спасибо!!! :)

Designer 17 Designer 17
15 дек. 2013 г. 00:26:15
Показать остальные 1 комментариев
Все ответы на вопрос 1
1

Спасибо @eskimo за помощь, благодаря которому у меня получилось заставить это работать, и я решил поделиться решением для тех, кто пытается сделать то же самое!

В файле ajax-login-script.js всё, что мне нужно было сделать — это изменить строку $('form#login_form').on('#submit', function(e) на $('form#login_form').on('submit', function(e), просто убрав символ # перед вызовом submit.

Надеюсь, это поможет кому-то!

27 янв. 2014 г. 02:17:21
Комментарии

Это было полезно, спасибо за предоставленную информацию.

Hexodus Hexodus
13 авг. 2014 г. 18:46:28