WordPress 实现点赞收藏功能

完整示例代码

PHP 代码(functions.php)

// 注册 AJAX 处理程序
add_action('wp_ajax_my_favorite_action', 'my_favorite_action');
add_action('wp_ajax_my_review_action', 'my_review_action');

function my_favorite_action() {
    // 检查用户是否登录
    if (!is_user_logged_in()) {
        wp_send_json(array('success' => false, 'message' => '请先登录'));
        wp_die();
    }

    // 获取并验证 POST 数据
    if (!isset($_POST['post_id']) || !is_numeric($_POST['post_id'])) {
        wp_send_json(array('success' => false, 'message' => '无效的请求'));
        wp_die();
    }

    $post_id = intval($_POST['post_id']);
    $user_id = get_current_user_id();

    // 处理收藏逻辑
    $favorites = get_user_meta($user_id, 'favorites', true);
    if (!$favorites) {
        $favorites = array();
    }

    if (!in_array($post_id, $favorites)) {
        $favorites[] = $post_id;
        update_user_meta($user_id, 'favorites', $favorites);
        wp_send_json(array('success' => true, 'message' => '收藏成功'));
    } else {
        wp_send_json(array('success' => false, 'message' => '已收藏'));
    }

    wp_die();
}

function my_review_action() {
    // 检查用户是否登录
    if (!is_user_logged_in()) {
        wp_send_json(array('success' => false, 'message' => '请先登录'));
        wp_die();
    }

    // 获取并验证 POST 数据
    if (!isset($_POST['post_id']) || !is_numeric($_POST['post_id']) || !isset($_POST['review_type'])) {
        wp_send_json(array('success' => false, 'message' => '无效的请求'));
        wp_die();
    }

    $post_id = intval($_POST['post_id']);
    $review_type = sanitize_text_field($_POST['review_type']);

    // 处理好评和恶评逻辑
    if ($review_type === 'good') {
        $good_reviews = get_post_meta($post_id, 'good_reviews', true);
        $good_reviews = $good_reviews ? $good_reviews + 1 : 1;
        update_post_meta($post_id, 'good_reviews', $good_reviews);
        wp_send_json(array('success' => true, 'message' => '好评成功', 'good_reviews' => $good_reviews));
    } elseif ($review_type === 'bad') {
        $bad_reviews = get_post_meta($post_id, 'bad_reviews', true);
        $bad_reviews = $bad_reviews ? $bad_reviews + 1 : 1;
        update_post_meta($post_id, 'bad_reviews', $bad_reviews);
        wp_send_json(array('success' => true, 'message' => '恶评成功', 'bad_reviews' => $bad_reviews));
    } else {
        wp_send_json(array('success' => false, 'message' => '无效的评价类型'));
    }

    wp_die();
}

JavaScript 代码

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.favorite-button').forEach(function(button) {
        button.addEventListener('click', function() {
            var postId = this.getAttribute('data-post-id');
            console.log('发送 AJAX 请求,postId: ' + postId);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', my_script_vars.ajaxurl, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 400) {
                    var response = JSON.parse(xhr.responseText);
                    console.log('AJAX 响应: ', response);
                    if (response.success) {
                        console.log(response.message);
                        alert('收藏成功');
                    } else {
                        alert(response.message);
                    }
                } else {
                    console.error('服务器返回错误');
                }
            };

            xhr.onerror = function() {
                console.error('请求失败');
            };

            xhr.send('action=my_favorite_action&post_id=' + postId);
        });
    });

    document.querySelectorAll('.review-button').forEach(function(button) {
        button.addEventListener('click', function() {
            var postId = this.getAttribute('data-post-id');
            var reviewType = this.getAttribute('data-review-type');
            console.log('发送 AJAX 请求,postId: ' + postId + ', reviewType: ' + reviewType);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', my_script_vars.ajaxurl, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 400) {
                    var response = JSON.parse(xhr.responseText);
                    console.log('AJAX 响应: ', response);
                    if (response.success) {
                        console.log(response.message);
                        if (reviewType === 'good') {
                            var goodReviewCount = document.getElementById('good-review-count-' + postId);
                            goodReviewCount.textContent = response.good_reviews;
                        } else if (reviewType === 'bad') {
                            var badReviewCount = document.getElementById('bad-review-count-' + postId);
                            badReviewCount.textContent = response.bad_reviews;
                        }
                    } else {
                        alert(response.message);
                    }
                } else {
                    console.error('服务器返回错误');
                }
            };

            xhr.onerror = function() {
                console.error('请求失败');
            };

            xhr.send('action=my_review_action&post_id=' + postId + '&review_type=' + reviewType);
        });
    });
});

详细步骤

  1. 确保 AJAX 请求正确发送

    • 确认 JavaScript 中的 ajaxurl 变量正确设置。
    • 确认 action 参数与 PHP 中的 wp_ajax_ 钩子匹配。
  2. 检查 PHP 处理函数

    • 确认 PHP 处理函数中正确使用了 wp_send_json 返回包含 success 字段的 JSON 响应。
    • 确认函数中没有语法错误或逻辑错误。
  3. 调试和日志记录

    • 在 PHP 处理函数中添加 error_log 或 var_dump 语句,以调试和检查变量值。
    • 在 JavaScript 中添加 console.log 语句,以调试和检查 AJAX 请求和响应。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇