Ajaxの返り値末尾に「0」がついてしまう

Question

こちらにあげたコードの、js/script.js内でajax通信をするのですが、
返り値末尾に0がついてしまい困っています。
呼んでいる関数は、get-hearts.php内のghe_give_heartです。

どなたかわかる方、お願いいたします。。

function get_heart_everyday() {
  $post_id = get_the_ID();
  if(!get_post_meta($post_id, 'ghe_count', true)) {
    add_ghe_fields($post_id);
  }

  echo '
    <div class="ghe-container">
      <div class="ghe-trigger" data-id="'.$post_id.'">
        <img src="' . plugins_url('get-hearts/images/inactive.svg') . '" alt="" class="ghe-image">
      </div>
      <div class="ghe-count">'.get_post_meta($post_id, 'ghe_count', true).'</div>
    </div>
  ';
}

add_action( 'wp_ajax_ghe_give_heart', 'ghe_give_heart' );
add_action( 'wp_ajax_nopriv_ghe_give_heart', 'ghe_give_heart' );
function ghe_give_heart() {
  $post_id =  intval($_REQUEST['postId']);
  $new_count = get_post_meta($post_id, 'ghe_count', true) + 1;
  update_post_meta($post_id, 'ghe_count', $new_count);

  $data = array(
    'count' => get_post_meta($post_id, 'ghe_count', true)
  );
  echo json_encode($data);
}

add_action('publish_post', 'add_ghe_fields');
add_action('publish_page', 'add_ghe_fields');
function add_ghe_fields($post_ID) {
  if(!wp_is_post_revision($post_ID)) {
    add_post_meta($post_ID, 'ghe_count', 0, true);
  }
}

$(function() {
    const $trigger = $('.ghe-trigger');
    $trigger.on('click', function() {
        let $el = $(this);
        let $image = $el.find('.ghe-image');
        let $count = $el.siblings('.ghe-count');

        let postId = $el.data('id');

        $.ajax({
            type: 'POST',
            xhrFields: { withCredentials: true },
            dataType: 'text',
            url: ajax_url,
            cache: false,
            data: {
                action: 'ghe_give_heart',
                postId: postId
            }
        }).then(
            function(data) {
                $image.attr('src', image_root_path + 'active.svg');
                $count.text(data);
            },
            function() {
                console.log('ajax error');
            }
        );
    })
})

ちなみにコード全体は、Githubこちらにあげています。

Comments

[退会済みユーザー]

Fiddler などのパケットキャプチャツールを使うなどして、サーバー側の問題なのかクライアント側の問題なのか切り分けてください。

Answer 1

ごめんなさい、記入が漏れていましたがWordpressです。
admin-ajax.phpを見てみたら、最後にwp_die('0');とあり、テキスト0を返しつつphpでの処理を強制終了させているということのようです。（ふわっとした理解です）
ajaxでのリクエストでも処理が完了できるように、get_heart_everyday()の最後にdie();を追加することで解決できました。

理解が甘いので、

• ajaxだとなぜ処理をきちんと完了できないのか

（.phpファイルでは同じようにechoで終了しても問題なく出力される）

• 今回の解決策は正しい解決方法なのか

以上の2点ご教授いただきたいです。

Answer 2

回答ではなくただのコメントになってしまい大変恐縮ですが、投稿者様のおかげで解決ができたのでお礼のコメントをさせていただきます！
僕もwordpressのループ処理ををAjaxで実装して非同期通信化させたのですがどうしても謎の0が表示されてしまっていてかなり困っていました。
そんな時の投稿者様のこの質問ページのおかげで解決することができたので、本当に感謝の言葉しかありません????✨WordPress（PHP）って奥が深いですね????
本当にありがとうございます！！✨✨