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

请在您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
}

希望它会为您工作。

Answer 2

由于您在请求中发送了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 3

如果我是你，我将在后端处理消息设置。这样的好处是，您可以使用消息ID或其他方式存储成功消息。例如，您可以将自定义设置页面添加到具有字段的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);
    }
});

因此，您必须确定要使用哪一个。

单击按钮时，Wordpress AJAX回显

3 个答案: