WordPress AJAX эхо при нажатии кнопки

Question

В functions.php у меня есть код, который я хотел бы сделать echo некоторым содержимым (на данный момент «тест», в конечном счете, сведения о заказе клиента, введенные в разных DIV одной и той же страницы) по нажатию кнопки.Это моя пользовательская кнопка, которая не перезагружает страницу.К сожалению, оповещение об успехе отсутствует, если я не удаляю echo 'test'; из своей функции.

add_action('wp_ajax_nopriv_order_summary_data', 'order_summary_data');
add_action('wp_ajax_order_summary_data', 'order_summary_data');
function order_summary_data() {
    echo 'test';
}

add_action('wp_footer', 'taisho_breadcrumb_interaction');
function taisho_breadcrumb_interaction() {
    if( !(is_cart() || is_checkout()) ) return; // Cart and checkout page only  
    ?>
        <script type="text/javascript">         

        var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";

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

            $('.c-step-3, .ch-step-2 .wc-forward').click(function(){            

                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: ajax_url,
                    data: {action: 'order_summary_data'},
                    success: function(response){
                        alert("Order data successfully fetched.");                      
                    }
                });                         
                return false;
            });

        }); 
        </script>
    <?php
}

Answer 1

Поскольку вы отправляете dataType: 'json' в запросе, вы должны использовать функцию wordpress wp_send_json. Ниже приведен обновленный код, который использует упомянутую функцию:

<?php
add_action('wp_ajax_nopriv_order_summary_data', 'order_summary_data');
add_action('wp_ajax_order_summary_data', 'order_summary_data');
function order_summary_data() {
    $return_data = array('data' => 'Testing');
    wp_send_json($return_data);
    exit;
}

add_action('wp_footer', 'taisho_breadcrumb_interaction');
function taisho_breadcrumb_interaction() {
    if( !(is_cart() || is_checkout()) ) return; // Cart and checkout page only  
    ?>
        <script type="text/javascript">         

        var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";

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

            $('.c-step-3, .ch-step-2 .wc-forward').click(function(){            

                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: ajax_url,
                    data: {action: 'order_summary_data'},
                    success: function(response){
                        console.log(response.data);
                        alert("Order data successfully fetched.");                      
                    }
                });                         
                return false;
            });

        }); 
        </script>
    <?php
}

Answer 2

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

На мой взгляд, это лучшее решение.Это ваш код с жестко закодированным сообщением.Вы должны иметь в виду мою идею выше:

add_action( 'wp_ajax_nopriv_order_summary_data', 'order_summary_data' );
add_action( 'wp_ajax_order_summary_data', 'order_summary_data' );
function order_summary_data() {

    //Add success message to data array
    $data = array(
        'message' => 'Order data successfully fetched.',
    );

    //Setup response array, pass data and return everything to the AJAX call
    $response = array( 'success' => true, 'data' => $data );
    wp_send_json_success( $response );
    wp_die();
}

add_action( 'wp_footer', 'taisho_breadcrumb_interaction' );
function taisho_breadcrumb_interaction() {
    if ( ! ( is_cart() || is_checkout() ) ) {
        return;
    } // Cart and checkout page only
    ?>
    <script type="text/javascript">

        var ajax_url = "<?php echo admin_url( 'admin-ajax.php' ); ?>";

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

            $('.c-step-3, .ch-step-2 .wc-forward').click(function () {

                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: ajax_url,
                    data: {action: 'order_summary_data'},
                    function(data) {
                        if (data.success) {
                            alert(data.message);
                        }
                    }
                });
                return false;
            });

        });
    </script>
    <?php
}

Если вы хотите использовать функцию успеха AJAX, вы можете удалить 'success' => true и заменить его на true:

$response = array( true, 'data' => $data );

Наконец, вам нужно немного изменить свою AJAX-функцию:

$.ajax({
    type: 'post',
    dataType: 'json',
    url: ajax_url,
    data: {action: 'order_summary_data'},
    success: function (data) {
        alert(data.message);
    }
});

Таким образом, вы должны решить, какую из них вы хотели бы использовать.

Answer 3

Пожалуйста, добавьте die(); после вас echo 'test';

add_action('wp_ajax_nopriv_order_summary_data', 'order_summary_data');
add_action('wp_ajax_order_summary_data', 'order_summary_data');
function order_summary_data() {
    echo 'test';
    die();
} 

add_action('wp_footer', 'taisho_breadcrumb_interaction');
function taisho_breadcrumb_interaction() 
{
    if( !(is_cart() || is_checkout()) ) return; // Cart and checkout page only  
?>
<script type="text/javascript"> 
 jQuery(document).ready(function($){ 

     $('.c-step-3, .ch-step-2 .wc-forward').click(function(){ 
            var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";
            var data = {
                            action: 'order_summary_data',
            };
            $.post(ajaxurl,data,function(res)
            {
                    alert(res);

            });
        });
    });

</script>
    <?php
}

Надеюсь, это сработает для вас.