programing

워드프레스에 Ajax를 사용하여 JSON 데이터 반환

i4 2023. 3. 27. 21:00
반응형

워드프레스에 Ajax를 사용하여 JSON 데이터 반환

그래, 꽤 긴 질문이네.저는 AJAX를 처음 접하고 특히 WordPress에서 사용하는데 온라인 튜토리얼을 따라가다 보니 거의 다 된 것 같습니다.

제가 지금까지 가지고 있던 것을 붙여서 제 생각을 설명하겠습니다.

자, 그럼 JS부터 시작하겠습니다.

jQuery(document).ready(function(){
     jQuery('.gadgets-menu').mouseenter(function(){

          doAjaxRequest();
     });
});

마우스가 .gadgets-menu로 들어가자 요구는 마우스 입력을 사용하여 트리거되어 한 번 실행됩니다.

요청 자체입니다.

function doAjaxRequest(){
     // here is where the request will happen
     jQuery.ajax({
          url: 'http://www.mysite.com/wp-admin/admin-ajax.php',
          data:{
               'action':'do_ajax',
               'fn':'get_latest_posts',
               'count':5
               },
          dataType: 'JSON',
          success:function(data){
                //Here is what I don't know what to do.                 

                             },
          error: function(errorThrown){
               alert('error');
               console.log(errorThrown);
          }


     });

} 

이제 php 함수입니다.

add_action('wp_ajax_nopriv_do_ajax', 'our_ajax_function');
add_action('wp_ajax_do_ajax', 'our_ajax_function');
function our_ajax_function(){


     switch($_REQUEST['fn']){
          case 'get_latest_posts':
               $output = ajax_get_latest_posts($_REQUEST['count']);
          break;
          default:
              $output = 'No function specified, check your jQuery.ajax() call';
          break;

     }


         $output=json_encode($output);
         if(is_array($output)){
        print_r($output);   
         }
         else{
        echo $output;
         }
         die;
}

또한 ajax_get_latest_posts 함수

function ajax_get_latest_posts($count){
     $posts = get_posts('numberposts='.'&category=20'.$count);

     return $posts;
}

이 작업을 올바르게 수행했다면$posts = get_posts('numberposts='.'&category=20'.$count);즉, 카테고리 20의 투고 수(5).지금은 어떻게 해야 할지 모르겠는데 제목과 섬네일은 어떻게 해야 하나요?

바보 같으면 미안해, 난 그냥 이 주변을 더듬고 있어.

수정된 php

add_action('wp_ajax_nopriv_do_ajax', 'our_ajax_function');
add_action('wp_ajax_do_ajax', 'our_ajax_function');
function our_ajax_function(){


      $output = ajax_get_latest_posts($_REQUEST['count']); // or $_GET['count']
    if($output) {
        echo json_encode(array('success' => true, 'result' => $output));
    }
    else {
        wp_send_json_error(); // {"success":false}
        // Similar to, echo json_encode(array("success" => false));
        // or you can use, something like -
        // echo json_encode(array('success' => false, 'message' => 'Not found!'));
    } 

         $output=json_encode($output);
         if(is_array($output)){
        print_r($output);   
         }
         else{
        echo $output;
         }
         die;
}


function ajax_get_latest_posts($count)
{
    $args = array( 'numberposts' => $count, 'order' => 'DESC','category' => 20 );
    $post = wp_get_recent_posts( $args );
    if( count($post) ) {
        return $post;
    }
    return false;
}

이것은 동작하지 않습니다.

jQuery(document).ready(function(){
     jQuery('.gadgets-menu').mouseenter(function(){

          doAjaxRequest();
     });
});
function doAjaxRequest(){
     // here is where the request will happen
     jQuery.ajax({
          url: 'http://localhost:8888/wp-admin/admin-ajax.php',
          data:{
               'action':'do_ajax',
               'fn':'get_latest_posts',
               'count':5
               },
          dataType: 'JSON',
          success:function(data){
            if(data.success) {
               alert("It works");


                        }
            else {
                // alert(data.message); // or whatever...
            }
        }


     });

} 

경보는 표시되지 않습니다.

고객님의 코드로get_posts('numberposts='.'&category=20'.$count);틀렸습니다만, 대신 wp_get_syslog_syslog 함수를 사용할 수 있습니다(단,get_posts예를 들어,

function ajax_get_latest_posts($count)
{
    $args = array( 'numberposts' => $count, 'order' => 'DESC','category' => 20 );
    $post = wp_get_recent_posts( $args );
    if( count($post) ) {
        return $post;
    }
    return false;
}

그럼 네 안에our_ajax-function사용할 수 있습니다.

    $output = ajax_get_latest_posts($_REQUEST['count']); // or $_GET['count']
    if($output) {
        echo json_encode(array('success' => true, 'result' => $output));
    }
    else {
        wp_send_json_error(); // {"success":false}
        // Similar to, echo json_encode(array("success" => false));
        // or you can use, something like -
        // echo json_encode(array('success' => false, 'message' => 'Not found!'));
    }

네 안에success콜백 함수를 체크할 수 있습니다.

success:function(data){
    if(data.success) {
        // loop the array, and do whatever you want to do
        $.each(data.result, function(key, value){
            // you can use $(this) too
            // console.log($(this)); // check this for debug and get an idea
        });
    }
    else {
        // alert(data.message); // or whatever...
    }
}

여기서 읽어보실 수 있습니다.wp_send_json_error도우미 기능에 대한 자세한 내용은 도우미 기능을 참조하십시오.

업데이트:

그리고 기억해라, 그 후$output=json_encode($output);$output더 이상 배열이 아니라json스트링, 그러니까is_array($output)false를 반환하지만is_array()부호화 직전에$output=json_encode($output);맘에 들다

if( is_array( $output ) ) {
    $output = json_encode( $output );
}

이 경우,is_array( $output )돌아온다true.

예/시뮬레이션

언급URL : https://stackoverflow.com/questions/17982078/returning-json-data-with-ajax-in-wordpress

반응형