在JavaScript的if判断中执行PHP的update_user_meta操作失效如何解决？

问题根本原因 #

PHP是服务端执行的语言，会在页面发送到用户浏览器之前就跑完所有代码，输出结果到页面；而JS是客户端（浏览器）执行的语言，是页面加载完之后在用户本地运行的。你把PHP直接写在JS的if判断里，首先PHP不会等JS的判断触发才执行，页面加载的时候就已经给用户加了积分了，其次PHP输出的内容还会破坏JS的语法结构，直接导致JS报错无法运行。

解决方案 #

你需要通过AJAX的方式，在JS触发胜负条件时，异步请求服务端的PHP接口来更新用户积分，针对WordPress场景的实现步骤如下：

步骤1：注册WordPress AJAX处理接口 #

把积分更新逻辑放到服务端的AJAX回调中，代码添加到当前主题的functions.php文件，或者自定义功能插件里：

// 处理登录用户的积分更新请求
add_action('wp_ajax_update_user_win_coins', 'update_user_win_coins_callback');
// 如果允许未登录用户操作可以加下面这行，不需要就删除
// add_action('wp_ajax_nopriv_update_user_win_coins', 'update_user_win_coins_callback');
function update_user_win_coins_callback() {
    // 安全校验，防止恶意请求
    if (!isset($_POST['_wpnonce']) || !wp_verify_nonce($_POST['_wpnonce'], 'update_coins_nonce')) {
        wp_send_json_error('非法请求');
    }
    $current_user = wp_get_current_user();
    if (!$current_user->ID) {
        wp_send_json_error('用户未登录');
    }
    $user_coins = get_user_meta($current_user->ID, 'usercoins', true);
    $user_coins_sum_plus = intval($user_coins) + 1;
    $update_result = update_user_meta($current_user->ID, 'usercoins', $user_coins_sum_plus);
    if ($update_result) {
        wp_send_json_success('积分更新成功');
    } else {
        wp_send_json_error('积分更新失败');
    }
}

// 前端输出AJAX地址和校验参数
add_action('wp_head', 'output_coin_ajax_params');
function output_coin_ajax_params() {
    ?>
    <script>
    window.coinAjaxParams = {
        ajaxUrl: '<?php echo admin_url('admin-ajax.php'); ?>',
        nonce: '<?php echo wp_create_nonce('update_coins_nonce'); ?>'
    };
    </script>
    <?php
}

步骤2：修改JS代码，触发条件时发起异步请求 #

修改原有的scoreCalculation函数，用户获胜时请求上面的服务端接口：

function scoreCalculation(random, userPick) {
  if (userPick === random) {
    userScore++;
    // 发起AJAX请求调用服务端更新积分逻辑
    fetch(window.coinAjaxParams.ajaxUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: new URLSearchParams({
        action: 'update_user_win_coins',
        _wpnonce: window.coinAjaxParams.nonce
      })
    })
    .then(res => res.json())
    .then(res => {
      if (res.success) {
        winner.innerHTML = `<h3><font color="green">You won</font></h3>`;
      } else {
        console.error('积分更新失败：', res.data);
        // 可自行添加失败提示逻辑
      }
    })
    .catch(err => {
      console.error('请求出错：', err);
    });
  }
}

注意事项 #

• nonce校验是为了防止CSRF攻击，不要省略
• 如果存在用户短时间内多次获胜的场景，建议添加请求锁，避免重复提交导致积分多加
• 目前胜负判断仅在前端执行，用户可以通过篡改JS代码恶意刷积分，如果是正式的积分体系，一定要把胜负逻辑也放到服务端做校验

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