如何通过AJAX将JS变量传给PHP无刷新更新数据库riskcoin值

• 页面嵌入登录页、布局错乱的核心原因：你的AJAX请求要么路径写错打到了非接口页面，要么后端接口没做异步请求的登录态兼容，SESSION校验失败时直接返回了完整登录页HTML；同时前端AJAX没指定返回数据格式为JSON，代码里如果存在直接将响应内容插入DOM的逻辑，就会把整页登录页渲染到当前页面里。
• login.css 404是衍生错误：嵌入的登录页HTML用相对路径引用样式文件，当前页面处于/games/路径下，浏览器会自动请求/games/login.css，但该文件实际存放在登录页所属的根目录，路径不匹配触发404，不是布局错乱的根因。
• 额外常见触发点：如果#button-deal按钮放在<form>标签内，绑定点击事件时没加默认行为拦截，会触发原生表单提交跳转，也会导致页面异常加载。

1. PHP后端实现 #

单独拆分异步更新余额的接口文件，和页面渲染逻辑解耦，所有异步接口统一返回JSON，不返回HTML、不做页面跳转。

余额更新接口（命名为update_riskcoin.php） #

<?php
session_start();
// 登录态校验，未登录直接返回JSON错误，不跳登录页
if (!isset($_SESSION['user_id'])) {
    header('Content-Type: application/json');
    echo json_encode(['code' => 401, 'msg' => 'login required']);
    exit;
}
// 参数合法性校验
if (!isset($_POST['pot']) || !is_numeric($_POST['pot'])) {
    header('Content-Type: application/json');
    echo json_encode(['code' => 400, 'msg' => 'invalid pot value']);
    exit;
}
$userId = intval($_SESSION['user_id']);
$newPot = intval($_POST['pot']);
// 数据库操作，替换成你自己的连接信息
$conn = new mysqli('数据库地址', '数据库账号', '数据库密码', '数据库名');
if ($conn->connect_error) {
    header('Content-Type: application/json');
    echo json_encode(['code' => 500, 'msg' => 'db connect failed']);
    exit;
}
// 预处理语句防SQL注入
$stmt = $conn->prepare("UPDATE klanten SET riskcoin = ? WHERE id = ?");
$stmt->bind_param("ii", $newPot, $userId);
$stmt->execute();
$stmt->close();
$conn->close();

header('Content-Type: application/json');
echo json_encode(['code' => 200, 'msg' => 'success', 'current_pot' => $newPot]);
exit;
?>

页面初始化逻辑（投注页PHP文件内） #

<?php
session_start();
// 页面访问的登录校验，未登录跳登录页
if (!isset($_SESSION['user_id'])) {
    header('Location: /login.php');
    exit;
}
$userId = intval($_SESSION['user_id']);
$conn = new mysqli('数据库地址', '数据库账号', '数据库密码', '数据库名');
$res = $conn->query("SELECT riskcoin FROM klanten WHERE id = {$userId}");
$userData = $res->fetch_assoc();
$initPot = intval($userData['riskcoin']);
$conn->close();
?>
<!-- 输出初始余额给前端JS使用 -->
<script>
window.USER_INIT_POT = <?php echo $initPot; ?>;
</script>

2. JS前端实现 #

const Bets = {
  pot: 0,
  bet: 0,
  // 初始化
  init: function() {
    this.pot = window.USER_INIT_POT;
    this.bindEvents();
    // 初始化渲染余额，不需要同步后端
    this.updateAmounts(false);
  },
  // 绑定事件
  bindEvents: function() {
    // 筹码点击事件，替换成你实际的筹码选择器
    document.querySelectorAll('.chip-image').forEach(chip => {
      chip.addEventListener('click', e => {
        const chipValue = parseInt(e.target.dataset.value);
        this.addBet(chipValue);
      })
    })
    // 发牌按钮事件，必须阻止默认行为
    document.querySelector('#button-deal').addEventListener('click', e => {
      e.preventDefault();
      // 原有发牌逻辑写这里
    })
  },
  // 加投注意务
  addBet: function(chipValue) {
    if (this.pot < chipValue) return; // 余额不足直接返回
    this.pot -= chipValue;
    this.bet += chipValue;
    // 余额变动，需要同步后端
    this.updateAmounts(true);
  },
  // 更新显示+同步后端
  updateAmounts: function(needSync) {
    // 更新前端DOM显示
    document.querySelector('#pot').textContent = this.pot;
    document.querySelector('#bet').textContent = this.bet;

    if (!needSync) return;
    // 异步同步余额到后端，原生fetch写法，和下面jQuery写法二选一即可
    fetch('update_riskcoin.php', {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: `pot=${this.pot}`
    }).then(res => res.json())
    .then(res => {
      if (res.code !== 200) console.error('余额同步失败：', res.msg);
    }).catch(err => {
      console.error('请求异常：', err);
    })

    // jQuery AJAX写法
    /*
    $.ajax({
      url: 'update_riskcoin.php',
      method: 'POST',
      data: {pot: this.pot},
      dataType: 'json', // 必须指定返回格式为json
      success: function(res) {
        if (res.code !== 200) console.error('余额同步失败：', res.msg);
      },
      error: function(xhr) {
        console.error('请求异常，状态码：', xhr.status);
      }
    })
    */
  }
}
// 启动投注逻辑
Bets.init();

• 打开浏览器开发者工具的Network面板，触发投注/发牌操作时查看异步请求的响应内容，如果返回的是完整HTML，说明请求路径错误，或者后端接口没有正确返回JSON。
• 检查所有在form内的按钮事件，必须加e.preventDefault()阻止默认表单提交。
• 所有异步接口禁止输出HTML、禁止做页面跳转，必须设置Content-Type: application/json响应头返回结构化数据。
• 修复接口返回格式问题后，login.css的404报错会自动消失。

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