Как вызвать PHP функцию с помощью Ajax при клике пользователя на кнопку

Question

Как вызвать PHP функцию с помощью Ajax при клике пользователя на кнопку

8 сент. 2018 г., 01:12:19

Просмотры: 42.3K

Голосов: 6

Я разрабатываю сайт на WordPress с использованием пользовательских шаблонов/тем, но столкнулся с проблемой. Я хочу использовать Ajax для вызова функции, когда пользователь нажимает кнопку. На одной странице у меня есть кнопка:

<p class='form-submit'>
        <input name='message_read' type='submit' class='submit button mark-as-read' value='Отметить как прочитанное' />
    </p>

И у меня есть функция jQuery/Ajax:

jQuery(document).ready(function() { 
   jQuery(".mark-as-read").click(function () {
    console.log('Функция подключена');
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'mark_message_as_read',
        },
        success: function (output) {
           console.log(output);
        }
        });
    });
});

Эта функция находится в wp-content/themes/my-theme/js/wp_ajax_calls.js. Я добавил скрипт на сайт следующим образом:

1) Я добавил это в файл functions.php:

wp_enqueue_script('ajax calls', get_template_directory_uri() .'/js/wp_ajax_calls.js', array('jquery'), '1.0', true);

2) Я включил скрипт в header.

<script type="text/javascript" src="https://mysite//wp-content/themes/twentyfifteen/js/wp_ajax_calls.js"></script>

Когда я нажимаю кнопку, сообщение console.log появляется. Насколько я понимаю, я хочу, чтобы моя ajax функция вызывала php функцию, которая позволит мне использовать $wpdb. У меня есть это в functions.php:

function mark_message_as_read() {
    global $wpdb;
    // выполнить действия
}

Здесь я запутался. У меня есть два основных вопроса:

1) Я думаю, что где-то должны быть add_action(), но я не знаю, где их разместить и какой хук использовать.

2) Кроме того, я хочу иметь возможность передавать данные (id сообщения) в php функцию для моего db запроса. Как передать аргумент в эту функцию?

Я не хочу использовать что-то вроде if( isset($_POST['message_whatever']) ) twentyfifteen_message_whatever(); из-за способа, которым у меня настроены сообщения.

Готов предоставить дополнительную информацию, если потребуется. Заранее спасибо за помощь!!

ellen

345

ajax wpdb

Комментарии

Пожалуйста, ознакомьтесь с документацией.

Jacob Peattie

8 сент. 2018 г. 07:59:17

Все ответы на вопрос

Комментарии

Большое спасибо! Я обязательно посмотрю nonces тоже. :D

ellen

8 сент. 2018 г. 18:44:49

Mike 574 · Accepted Answer · 2018-09-08T09:03:38Z

Создайте дочернюю тему, чтобы не изменять код существующей темы напрямую, так как при следующем обновлении темы все ваши изменения могут быть потеряны (см. Дочерние темы)

Вот как передать значения в ваш AJAX-запрос:

jQuery(document).ready(function() { 
   jQuery(".mark-as-read").click(function () {
    console.log('Функция подключена');
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'mark_message_as_read',
            // добавьте ваши параметры здесь
            message_id: $('.your-selector').val()
        },
        success: function (output) {
           console.log(output);
        }
        });
    });
});

Также вы можете изучить Nonces, чтобы добавить уровень безопасности вашему приложению: https://codex.wordpress.org/WordPress_Nonces

Наконец, PHP-код для обработки запроса (здесь тоже следует обрабатывать nonce в реальном коде):

// регистрируем ajax-действие для авторизованных пользователей
add_action('wp_ajax_mark_message_as_read', 'mark_message_as_read');

// регистрируем ajax-действие для неавторизованных пользователей
add_action('wp_ajax_nopriv_mark_message_as_read', 'mark_message_as_read');

// обрабатываем ajax-запрос
function mark_message_as_read() {
    $message_id = $_REQUEST['message_id'];

    // добавьте вашу логику здесь...

    // в конце возвращаем успешные json-данные
    wp_send_json_success([/* некоторые данные здесь */]);

    // или, в случае ошибки, возвращаем json-данные об ошибке
    wp_send_json_error([/* некоторые данные здесь */]);
}