워드프레스 Ajax 사용 – Front-end

qpress 2020년 1월 28일 67

앞 글에서 Admin 사이드에서의 Ajax 사용법을 알아 보았다. Front 화면에서 워드프레스의 Ajax 기능을 사용하기 위해서는, 호출하는 JavaScript가 워드프레스 코어의 Ajax action을 다루는 admin-ajax.php를 인식할 수 있게 해 주어야 한다.

이를 해결하는 가장 좋은 방법이 wp_localize_script() 함수를 이용하는 것이다.
아래 예제를 보도록 하다.

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
	wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') );
	// 내가 작성한 JavaScript 파일인 my_query.js 파일을 ajax-script 이라는 핸들명으로 Enqueue 시킴
	wp_localize_script(
        'ajax-script',
        'ajax_object',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ))
    );
    //my_query.js 파일(핸들명 : ajax-script)의 JavaScript가 amdin-ajax.php를 인식하도록 함
   // 'ajax_object'는 내가 명명한 ajaxurl object 명이며, javaScript에서 호출 시에는 ajax_object.ajax_url 로 사용한다.
}

// Same handler function...
add_action( 'wp_ajax_my_action', 'my_action' );
function my_action() {
    global $wpdb;
    $whatever = intval( $_POST['whatever'] );
    $whatever += 10;
    echo $whatever;
    wp_die();
}

my_query.js에서 위의 Ajax Action을 요청하는 코드는 다음과 같다.

jQuery(document).ready(function($) {
	var data = {
		'action': 'my_action',
		'whatever': 10   // We pass php values differently!
	};
	// We can also pass the url value separately from ajaxurl for front end AJAX implementations
	jQuery.post(ajax_object.ajax_url, data, function(response) {
		alert('Got this from the server: ' + response);
	});
});