javascript - 在WordPress插件中使用前端AJAX

Question

我正在尝试将 AJAX 请求编写为 WordPress 插件。我最初向外部非 WP 服务器(运行良好)发出请求只是为了测试，因为我对 WP 开发完全陌生。然后，我根据 WP codex 尝试使用 wp_localize_script 和 .ajaxurl，但我得到的唯一响应是来自 admin-ajax 的“0”。这是插件代码:

imap.php:

<?php
/**
 * Plugin Name: JQVMap & ChartJS World Map
 * Author:      Jesse Dillman
 */
add_action( 'wp_enqueue_scripts', 'enqueue_dependencies' );

function enqueue_dependencies()
{
    # Run only on given page
    if( !is_page(229) )
        return;

    # Enqueue styles
    wp_enqueue_style( 'jmap-css', plugins_url( '/css/jqvmap.css', __FILE__ ) );

    # Register dependencies files
    wp_register_script( 'js', plugins_url( '/js/jquery-1.7.2.min.js', __FILE__ ) );
    wp_register_script( 'jmap-js', plugins_url( '/js/jquery.vmap.js', __FILE__ ) );
    wp_register_script( 'world-js', plugins_url( '/js/jquery.vmap.world.js', __FILE__ ) );
    wp_register_script( 'unregions-js', plugins_url( '/js/jquery.vmap.un_regions.js', __FILE__ ) );
    wp_register_script( 'regioncolors-js', plugins_url( '/js/region_colors.js', __FILE__ ) );
    wp_register_script( 'chart-js', plugins_url( '/js/Chart.js', __FILE__ ) );

    # Enqueue custom JS file along with dependencies
    wp_enqueue_script( 
        'start-js', 
        plugins_url( '/js/start.js', __FILE__ ), 
        array( 'js', 'jmap-js', 'world-js', 'unregions-js', 'regioncolors-js', 'chart-js' ), // dependencies
        false,
        true  
    );

    wp_localize_script( 'start-js', 'get_data', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));
}


function get_chart_data(){
$region1Pie = array(50, '#ddd', 50, '#dc7d50');
$region2Pie = array(25, '#ddd', 75, '#7a9e89');
$region3Pie = array(75, '#ddd', 25, '#867e40');

$chartData = new stdClass();
$pieData = array();

// Swtich based on region
switch($_REQUEST['region']) {
  case 'China':
    $pieArray = $region1Pie;
    break;
  case 'Canada':
    $pieArray = $region2Pie;
    break;
  case 'Brazil':
    $pieArray = $region3Pie;
    break;
}

for($i=0; $i<count($pieArray); $i+=2) {
  $pie= new stdClass();
  $pie->value = $pieArray[$i];
  $pie->color = $pieArray[$i+1];
  $pieData[] = $pie;
}

$chartData->pieData = $pieData;
echo json_encode($chartData);

die();
}

add_action('wp_ajax_get_chart_data', 'get_chart_data');
add_action('wp_ajax_nopriv_get_chart_data', 'get_chart_data');
?>

start.js:

// get pie chart canvas
var pie= document.getElementById("pie").getContext("2d");


jQuery(document).ready(function() {

    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#fff',
        // more config options....
        onRegionClick: function(element, code, region)
        {
            $.ajax(get_data.ajaxurl, {
                data: {region: region},
                action: 'get_chart_data',
                dataType: 'json',
                success: function(response) {
                    new Chart(pie).Doughnut(response.pieData, pieOptions);
                }
            });
        }   
    });
});

当在 WP 之外正确运行时，这会渲染一个世界地图，根据用户单击的位置使用不同的数据表显示饼图。它使用 ChartJS 和 JQVMap。再说一遍，我是在 WordPress 中使用 AJAX 的新手。我是否错误地使用了 localize_script，或者我实现 WP admin-ajax 的方式是否存在其他问题？

Answer 1

摆脱

action: 'get_chart_data',

在您的 AJAX 调用中并将其添加到数据属性中，如下所示...

data: {'region': region, 'action': 'get_chart_data'}, 

这应该将操作传递到 WP，以便它可以与 wp_ajax_get_chart_data 操作相匹配。