Question

我试图将AJAX请求编写为WordPress插件。我最初向外部非WP服务器（运行良好）提出请求仅仅是为了进行测试，因为我对WP的开发是全新的。然后我尝试根据WP codex使用wp_localize_script和.ajaxurl，但我得到的唯一响应是＆＃39; 0＆＃39; 0来自admin-ajax。这是插件代码：

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和JQVMaps。同样，我在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操作匹配。

在WordPress插件中使用前端AJAX

1 个答案: