Создание пользовательской формы входа с использованием AJAX
Я пытаюсь использовать этот туториал 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, поэтому любая помощь будет очень ценной!
Спасибо @eskimo за помощь, благодаря которому у меня получилось заставить это работать, и я решил поделиться решением для тех, кто пытается сделать то же самое!
В файле ajax-login-script.js
всё, что мне нужно было сделать — это изменить строку $('form#login_form').on('#submit', function(e)
на $('form#login_form').on('submit', function(e)
, просто убрав символ #
перед вызовом submit
.
Надеюсь, это поможет кому-то!
