3가지 방법으로 WordPress에서 AJAX 사용

여기서 우리는 AJAX를 사용하여 가장 많이 사용되는 3가지 도구를 사용하여 데이터를 가져오는 것을 볼 것입니다.

서버 측 코드

활성 테마 폴더의 루트에 있는 functions.php 파일에 함수와 두 개의 후크를 생성하여 시작하겠습니다. 함수의 이름은 네트워크 요청을 만들기 위해 클라이언트 측에서 사용됩니다. 이는 모든 요청이 동일한 URL로 이루어지기 때문에 WordPress가 어떤 함수를 실행해야 하는지 식별하는 방법입니다.

WordPress는 선택한 사용자 지정 함수 이름의 접미사가 있는 두 개의 후크를 제공합니다. 간단하게 하기 위해 "get_recent_posts_ajax"라고 하겠습니다. 하나의 후크는 로그인한 사용자를 위한 것이고 다른 하나는 게스트 사용자를 위한 것입니다. 여기서는 JSON 응답만 반환하지만 여기에서 복잡한 계산을 수행하거나 cURL을 사용하여 다른 네트워크 요청을 합니다.

function get_recent_posts_ajax(){
    if( !wp_verify_nonce($_POST['nounce'],'get_recent_posts_ajax') ){
        echo json_encode(array( 'status' => false, 'message' => 'Nounce error' ));
        exit(0);
    }

    $data = array();
    $posts = wp_get_recent_posts(array(
        'posts_per_page' => $_POST['number_of_posts'],
        'post_status' => 'publish',
    ));

    foreach ($posts as $key => $value) {
        $data[] = array(
            'ID' => $value['ID'],
            'post_date' => $value['post_date'],
            'post_title' => $value['post_title'],
            'post_excerpt' => $value['post_excerpt'],
            'comment_count' => $value['comment_count'],
            'permalink' => get_permalink($value['ID']),
        );
    }
    echo json_encode($data);
    exit(0);
}
// For logged in users
add_action('wp_ajax_get_recent_posts_ajax', 'get_recent_posts_ajax');
// For not logged in users
add_action('wp_ajax_no_priv_get_recent_posts_ajax', 'get_recent_posts_ajax');

고객 입장에서

여기서 대부분의 코드는 자명하며 자세한 설명이 아니라 코드 스니펫에 가깝습니다.

HTML

먼저 간단한 텍스트 필드가 있는 기본 양식을 만듭니다. 또한 "action"이라는 숨겨진 필드를 포함하고 값을 부여합니다. 이 값과 같은 이름으로 서버 측에서 함수를 사용했으므로 하이픈을 사용하지 마십시오.

<form id="form" action="<?php echo admin_url('admin-ajax.php'); ?>">
    <input type="number" min="1" name="number_of_posts" value="" required />
    <input type="hidden" name="nounce" value="<?php echo wp_create_nonce('get_recent_posts_ajax'); ?>" />
    <input type="hidden" name="action" value="get_recent_posts_ajax" />
    <button type="submit">Submit</button>
</form>

옵션 1: 바닐라 JS

var form = document.getElementById('form');
form.addEventListener('submit', function(e){
    e.preventDefault();

    var formData = new FormData(form);
    formData.append('extra_key', 'extra_value');
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.getAttribute('action'), true);
    xhr.onreadystatechange = function (res) {
        if (this.readyState == 4 && this.status == 200) {
            var res = JSON.parse(xhr.responseText);
            console.log(res);
        }
        if (this.readyState == 4 && this.status == 404){
            console.log('An error occurred')
        }
    }
    xhr.send(formData);

}, false);

옵션 2: 액시오스

var form = document.getElementById('form');
form.addEventListener('submit', function(e){
    e.preventDefault();

    var formData = new FormData(form);
    formData.append('extra_key', 'extra_value');
    var xhr = new XMLHttpRequest();
    axios.post(form.getAttribute('action'),
        formData
    ).then(function (res) {
        console.log(res.data);
    }).catch(function (err) {
        console.log(err);
    }).then(function () {
        // always executed
    });

}, false);

옵션 3: jQuery

jQuery(function ($) {

    $('#form').on('submit', function(e){
        e.preventDefault(); // prevent page refresh on submit

        var formData = new FormData($('#form')[0]); // pass HTML form element as argument
        formData.append('extra_key', 'extra_value');
        $.ajax({
            method: 'POST',
            data: $('#form').serialize(), // you can also use jQuery serialize
            // data: formData,
            // processData: false, // add this if using "new FormData"
            // contentType: false, // add this if using "new FormData"
            url: $('#form').attr('action'),
        }).done(function(res) {
            var res = $.parseJSON(res)
            console.log(res);
        }).fail(function(err){
            console.log(err);
        }).always(function(){
            console.log('this will always execute');
        });
    });

});