워드프레스 | AJAX 사용법

개요

AJAX는 페이지를 이동하지 않고도 일부분만 작동을 할 수 있는 방법입니다.

주의사항

테마에서는 반드시 functions.php 를 통해서 작동시켜야 합니다. 페이지에서 구현하면 로드가 제대로 되지 않기 때문에 400 에러가 뜨게 됩니다.

AJAX 선언하기

보이는 면 (Viewer-Facing Side) 이라고 합니다.

function 함수명() {
    // 함수내용 시작
    echo "AJAX";
    // 함수내용 끝
    wp_die();
}
add_action('wp_ajax_액션명', '함수명');
add_action('wp_ajax_nopriv_액션명', '함수명');

우리가 작동시킬 함수명 함수를 등록합니다. (이는 콜백함수입니다) 함수 실행을 마쳤다면 wp_die() 로 반드시 구문을 종료해야 합니다

그 다음 add_action 으로 액션명을 정의합니다.

• wp_ajax_액션명 은 로그인한 유저
• wp_ajax_nopriv_액션명은 비로그인 유저에게 작동됩니다.

로그인, 비로그인 유저 모두 AJAX 기능을 쓰려면 모두 등록해야 합니다.

제이쿼리 사용

풀어쓰기

var ajaxurl = '<?php echo admin_url("admin-ajax.php"); ?>';

var query = {
    'post_type': 'post',
    // 'category_name': 'news',
    'paged': 1
};
var data = {
    'action': '액션명',
    'query': JSON.stringify(query),
    'page': page
};

function load_posts() {
    jQuery.ajax({
        url: ajaxurl,
        type: 'post',
        data: data,
        success: function(response) {
            console.log("성공");
            console.log(response);
        }
    });
}

압축

jQuery(document).ready(function() {
	jQuery("button").on("click" , function(){
		jQuery.get('<?php echo admin_url('admin-ajax.php')?>',{
			'action': 'my_action'
		}, function(data){
			console.log(data);
		});
	});
});

자바스크립트 사용

const contactForm = document.getElementById('contact-form');

if (contactForm) {

  contactForm.addEventListener('submit', (e) => {
    e.preventDefault();

    fetch('/wp-admin/admin-ajax.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams(new FormData(contactForm))
    }).then(response => {

      return response.json();

    }).then(jsonResponse => {

      console.log({ jsonResponse });

    });

  });

}

fetch 함수를 사용합니다

wp_localize_script

보안 검증 nonce

wp_nonce_field