WordPress 플러그인으로 AJAX 요청을 작성하려고합니다. 처음에는 WP 용으로 개발 한 것이 처음 이었기 때문에 테스트를 위해 처음에는 외부 WP가 아닌 서버 (요청이 실행 된 곳)에 요청했습니다. WP 코드에 따라 wp_localize_script와 .ajaxurl을 사용하여 시도했지만, 내가 얻는 유일한 응답은 admin-ajax에서 '0'입니다.WordPress 플러그인에서 프런트 엔드 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를 구현 한 방법에 또 다른 문제가 있습니까?
'
'을 보면 둘 이상의 jQuery 라이브러리 로딩 버전이 보입니까? 일부 플러그인이나 테마가로드되지 않는 경우는 거의 없습니다. 두 버전을로드하여 충돌을 일으킬 수 있습니다. –위의 스크립트는 테스트를 위해 외부 비 WP 서버에 AJAX 호출을 사용하여 실행했을 때 그대로 실행됩니다. AJAX url을 get_data.ajaxurl로 변경하고 localize_script를 추가 한 다음 admin-ajax를 통해 요청을 실행하기 위해 add_action ('wp_ajax') 코드를 추가했을 때만 문제가 발생했습니다. –
브라우저 콘솔을 통해 전화를 추적 했습니까? URL이 맞습니까? GET 변수가 정확합니까? 기타? 'response'에서 무엇이 돌아 오나요? –