WordPress AJAX调用update_post_meta时自定义字段数据未保存问题

问题根因 #

你现在遇到的点击后前端数字涨、刷新就归零、后台无更新的问题，本质是数据库写入操作根本没成功执行，前端的数字变化只是JS本地修改DOM的临时效果，常见触发原因如下：

• AJAX处理代码放错了位置：如果把你贴的那段PHP直接写在brands的单页模板里，这段代码只有访问品牌详情页的时候才会被加载，AJAX请求走WordPress的admin-ajax接口时根本不会执行到这段逻辑，所有meta读写操作都没跑
• 传参错误：前端AJAX提交的时候传的post_id不是对应models文章的有效ID，要么传了brands类型的文章ID，要么ID值为空，写入操作自然不生效
• 字段更新方式不匹配：vote字段是通过ACF创建的，直接用原生update_post_meta写入时如果没同步ACF的字段键映射，后续ACF读取、后台保存逻辑可能会把值覆盖回空

修复步骤 #

1. 把AJAX处理逻辑挪到主题目录下的functions.php文件里，挂载到WordPress标准AJAX动作钩子上，保证请求能正确走到处理逻辑
2. 加基础校验：包括请求合法性校验、文章类型校验，避免非法请求、写错ID的问题
3. 用ACF官方的update_field函数更新投票值，保证后台编辑页、前端读取逻辑完全同步，不会出现值不一致的问题
4. 调整前端JS逻辑：等AJAX请求返回成功后再更新页面上的投票数字，不要一点击就直接改DOM，避免请求失败时显示错误数据

修正后的可直接用代码 #

把下面这段代码加到functions.php里：

// 注册AJAX接口，登录、未登录用户都可访问
add_action('wp_ajax_update_model_vote', 'model_vote_update_handler');
add_action('wp_ajax_nopriv_update_model_vote', 'model_vote_update_handler');
function model_vote_update_handler() {
    // 校验请求合法性，防止恶意刷票
    if (!isset($_POST['_wpnonce']) || !wp_verify_nonce($_POST['_wpnonce'], 'model_vote_action')) {
        wp_send_json_error('非法请求', 403);
    }

    $model_id = isset($_POST['post_id']) ? absint($_POST['post_id']) : 0;
    // 校验提交的ID是否属于models文章类型
    if (!$model_id || get_post_type($model_id) !== 'models') {
        wp_send_json_error('无效的车型ID', 400);
    }

    // 读取当前投票数，无值则初始为0
    $current_vote = absint(get_field('vote', $model_id));
    $new_vote = $current_vote + 1;

    // 更新ACF字段，自动同步后台和前端的读取逻辑
    update_field('vote', $new_vote, $model_id);

    wp_send_json_success([
        'vote_count' => $new_vote
    ]);
}

前端对接注意点 #

• 不要硬编码AJAX请求地址，在页面输出时用wp_localize_script把全局AJAX地址、nonce值传递给JS，示例：

// 把这段放在你加载投票JS的代码前面
wp_enqueue_script('vote-script', get_stylesheet_directory_uri() . '/assets/js/vote.js', array('jquery'), '1.0', true);
wp_localize_script('vote-script', 'vote_conf', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('model_vote_action')
));

• 投票按钮上要加data属性存对应models文章的ID，比如循环输出的时候写成<button class="vote-btn" data-model-id="<?php echo $model->ID; ?>">投票</button>，JS点击时取这个ID提交，不要写死ID
• JS回调里判断请求成功后再更新页面上的投票数字，不要点击就直接加1

校验方法：部署完代码打开浏览器开发者工具的网络面板，点击投票按钮看接口返回：如果返回200且响应体里有更新后的投票数，再刷新页面、去后台models文章编辑页核对，值就会正常保存了。

内容的提问来源于stack exchange，提问作者problematic child