Как запустить AJAX по клику на кнопку?

Question

Как запустить AJAX по клику на кнопку?

27 июл. 2011 г., 19:57:14

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

Голосов: 7

Обновление: Мне удалось заставить AJAX работать, но не в обработчике клика. Я обновил вопрос соответственно.

Я пытаюсь использовать код, который нашел на странице: 'AJAX в плагинах'.

Однако я не могу заставить его работать и не знаю, с чего начать поиск проблемы. Код работает, когда я убираю функцию клика и просто запускаю его при загрузке страницы.

У меня есть JavaScript файл, который выглядит так:

jQuery(document).ready(function(){
    jQuery("#createremotesafe").click(function(){
        alert ('test');
        var data = {
            action: 'my_action',
            whatever: 1234
        };

        // начиная с версии 2.8 ajaxurl всегда определен в заголовке админки и указывает на admin-ajax.php

        jQuery.post(ajaxurl, data, function(response) {
            alert('Получено с сервера: ' + response);
        });
    });    
});

и где-то в моем PHP скрипте, который генерирует кнопку, которая должна выполнить JavaScript (т.е. страница админки), и остальную часть страницы:

add_action('wp_ajax_my_action', 'my_action_callback');
echo 'test2';
function my_action_callback() {
    global $wpdb; // так вы получаете доступ к базе данных
    $whatever = $_POST['whatever'];
    $whatever += 10;
    echo $whatever;
    die(); // это необходимо для возврата корректного результата
}

Я получаю и Alert ('test') и echo 'test2', но не получаю алерт с ответом. JavaScript ошибок нет. Мой код определенно выполняется, так как я вижу оба 'test', но почему AJAX не получает никакого ответа? Может быть моя PHP функция исчезает после загрузки страницы? Возможно, я не могу/не должен использовать встроенные функции AJAX WordPress?

Также не показывается пустой алерт, просто ничего не происходит.

joon

199

разработка плагинов javascript ajax

Комментарии

Два момента: 1) Определена и корректна ли переменная ajaxurl? 2) Где вы видите срабатывание echo 'test2'?

Ryan Kinal

27 июл. 2011 г. 20:15:58

1) Да (я проверил), 2) Перед любым контентом админ-страницы, прямо в самом верху.

joon

27 июл. 2011 г. 20:26:25

Вы путаете jQuery переменные, вам следует использовать обертку no-conflict.

t31os

27 июл. 2011 г. 21:24:46

Марк, спасибо, я не знал об этом. Однако это мало что изменило, результаты те же

joon

28 июл. 2011 г. 15:02:59

Ответ добавлен, пожалуйста, прокомментируйте вопрос, который я поднял в своем ответе.

t31os

28 июл. 2011 г. 16:30:29

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

Комментарии

Это работает до тех пор, пока я не пытаюсь добавить Javascript к событию клика по кнопке, а не к загрузке страницы. Код выполняется, потому что я получаю алерт, но Ajax-функция, вероятно, исчезает после загрузки страницы.

joon

28 июл. 2011 г. 18:29:05

Вы ранее путали переменные, с функцией клика всё работает отлично, см. мой обновлённый код выше (рабочий пример).

t31os

28 июл. 2011 г. 18:50:08

Кажется, я пропустил часть кода в обновлённом примере, там отсутствует add_action( 'in_admin_header', 'my_ajax_button' ); в начале кода, к сведению.

t31os

28 июл. 2011 г. 19:58:27

Мне удалось заставить это работать, следуя вашему совету, спасибо. Странно, что я получил оба своих 'тестовых' сообщения, а код не работал, потому что я не могу представить, что я делаю по-другому сейчас.

joon

29 июл. 2011 г. 14:16:06

Как я уже говорил изначально, думаю, это был просто случай смешивания переменных jQuery, с подходом no-conflict, который я описал выше, у вас не должно быть проблем (все, что внутри функции document ready, может безопасно использовать $). Рад был помочь.. ;)

t31os

29 июл. 2011 г. 15:41:02

t31os 18.7K · Accepted Answer · 2011-07-28T16:11:50Z

Начните с рабочей кодовой базы..

add_action('in_admin_header', 'my_ajax_button');

function my_ajax_button() {
    echo '<a href="#ajaxthing" class="myajax">Тест</a>';
}

add_action('admin_head', 'my_action_javascript');

function my_action_javascript() {
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {

    $('.myajax').click(function(){
        var data = {
            action: 'my_action',
            whatever: 1234
        };

        // начиная с версии 2.8 ajaxurl всегда определен в заголовке админки и указывает на admin-ajax.php
        $.post(ajaxurl, data, function(response) {
            alert('Получено от сервера: ' + response);
        });
    });


});
</script>
<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');

function my_action_callback() {
     global $wpdb; // так вы получаете доступ к базе данных

     $whatever = $_POST['whatever'];

     $whatever += 10;

             echo $whatever;

     exit(); // это необходимо для возврата правильного результата & exit работает быстрее чем die();
}

Это код (с небольшой корректировкой) со страницы кодекса, и он мне полностью подходит, поэтому я предлагаю использовать его как отправную точку.. если вы изначально делали именно так, в какой момент он сломался или перестал работать?

ПРИМЕЧАНИЕ: Mark - это я, я использую дополнительный аккаунт при доступе к сайту с другого ПК (который не мой).