Json 响应需要更新 Javascript 值并替换全局初始全局值 - 需要解决方案

Question

我正在努力全神贯注地获取 api 并获取。从我一直在研究的内容来看，它看起来应该很容易，但我的想法并没有完全理解。在我的游戏中 Javascript，它以 money=2000 全局变量开始。

游戏运行良好，但是当有人离开并转到他们的个人资料页面并返回游戏时，游戏会重置并从头开始游戏并将钱重置回 2000。

真正疯狂的是，如果我刷新页面，我终于在网页上看到正确的值 2200，这就是数据库中的值。

startgame.html

<!DOCTYPE html>
<html>
    <head> 
<TITLE>Interactive Game</TITLE>
        <meta charset="UTF-8">
    </head>

    <body background="images/pvpcoinnew.png" style="width=120%" onLoad="updateMoney(); popup('popUpDiv'); click(); updown()" oncontextmenu="return false;">
<img background="images/pvpcoinnew.png">

<select id="textbox">
  <option value="1">1</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="25" selected>25</option>
  <option value="50">50</option>
  <option value="75">75</option>
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="250">250</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
</select> 
    <button type="click" id="button" onclick="enterWager(); return false;">Wager!</button>

    <p>Money: $<span id="money"></span><br></p>


        <script type="text/javascript" src="game.js"></script>

    </body>
</html>

下面的game.js文件一开始就预设了货币为2000。 game.js

//money = 2000;
window.money = 2000;
          
fetch('../php/moneyupdate/moneyupdate.php?money=value')
  .then((response) => {
    return response.json()
  })
  .then((money) => {
    // Work with JSON data here
    window.money = money
    console.log(money)
  })
  .catch((err) => {
    // Do something for an error here
  })
  
  
document.getElementById("money").innerHTML = window.money;

当从获取中触发 php 文件时，状态为 200。XHR 响应负载返回数据库中的“2200”，但网页仍显示 2000。

这是 moneyupdate.php 文件

<?php 
session_start();
if(empty($_SESSION['userid']))
{
    header("Location: ../login/index.php");
}
include('../../login/database.php');


if(isset($_GET["money"])) {
  $money = htmlspecialchars($_GET["money"]);
  $userid = $_SESSION['userid'];

try {
$db = DB();
$stmt = $db->prepare("SELECT money FROM usersystem WHERE userid=?");
$stmt->execute([$userid]);
$money = $stmt->fetchColumn();


// send a JSON encded money array to client
header('Content-type: application/json;charset=utf-8');
echo json_encode($money);
//}


}
catch(PDOException $e)
{
    $db = null;  
    echo $e->getMessage();  
}
}
// Notes: The json_encode function returns the JSON representation of the given value. 
//        The json_decode takes a JSON encoded string and converts it into a PHP variable.
?>

感谢您的帮助和回复！

Answer 1

如果我没理解错的话，你可能想使用对象 window 来存储你的变量，你可以从任何地方访问它

    window.money = 2000;
    
    fetch('../php/moneyupdate/moneyupdate.php')
      .then((response) => {
        return response.json()
      })
      .then((money) => {
        // Work with JSON data here
        window.money = money
        console.log(money)
      })
      .catch((err) => {
        // Do something for an error here
      })

关于 PHP 部分，我希望我能提供帮助，但这不是我的强项。不过希望我的提示对您有所帮助。

Answer 2

使用 GET['money'] 时，将其添加到您的 url“http:site.com/page.php?money=value”。 window.money = 2000;

fetch('../php/moneyupdate/moneyupdate.php?money=2000')
  .then((response) => {
    return response.json()
  })
  .then((money) => {
    // Work with JSON data here
     //working with json data depends on structure 
      // you can access data as money.money
    window.money = money
    console.log(money)
  })
  .catch((err) => {
    // Do something for an error here
  })

Answer 3

已解决 - 起初我不确定将 getElementById 放在哪里，没有意识到它需要在获取范围内。我还将提取放入一个函数中，以便可以从 html 文件加载中调用它，我在 html 页面文件上显示它。我还将它插入到 updateMoney() 中。它立即解决了我必须重新加载页面才能看到显示的货币价值的问题。

game.js

 // window.money = 2000;
    function getMoney(){
    fetch('../php/moneyupdate/moneyupdate.php?money=value')
      .then((response) => {
        return response.json()
      })
      .then((money) => {
        // Work with JSON data here
        window.money = money
        document.getElementById("money").innerHTML = window.money;
        //console.log(money)
      })
      .catch((err) => {
        // Do something for an error here
      })
    }

function updateMoney() {
       if ( pot <= 0 ){ 
       if ( money <= 0 ){ 
       document.getElementById("aaa").innerHTML = "Lost? Here's A Loan !!!";
          money = 1000 ;}
      }
//       document.getElementById("money").innerHTML = money;
         document.getElementById("money").innerHTML = window.money;
      }

在 JS 中编写上面的代码并不是我需要做的全部。我必须实际触发 getMoney() 以便它获取 php 文件并从数据库中获取列。

startgame.html

<body background="images/pvpcoinnew.png" style="width=120%" onLoad="getMoney(); updateMoney(); popup('popUpDiv'); click(); updown()" oncontextmenu="return false;">

我不需要更改 php 页面上的任何内容，但我仍然想知道我是否真的需要这一行，因为我没有将它用于任何用途。 $money = htmlspecialchars($_GET["money"]);

moneyupdate.php

<?php 
session_start();
if(empty($_SESSION['userid']))
{
    header("Location: ../login/index.php");
}
include('../../login/database.php');


if(isset($_GET["money"])) {
  $money = htmlspecialchars($_GET["money"]);
  $userid = $_SESSION['userid'];

try {
$db = DB();
$stmt = $db->prepare("SELECT money FROM usersystem WHERE userid=?");
$stmt->execute([$userid]);
$money = $stmt->fetchColumn();


// send a JSON encded money array to client
header('Content-type: application/json;charset=utf-8');
echo json_encode($money);
//}


}
catch(PDOException $e)
{
    $db = null;  
    echo $e->getMessage();  
}
}
// Notes: The json_encode function returns the JSON representation of the given value. 
//        The json_decode takes a JSON encoded string and converts it into a PHP variable.
?>

Json 响应需要更新 Javascript 值并替换全局初始全局值 - 需要解决方案

Json Response needs to update Javascript value and replace global initial global value - work around solution needed

javascript

php

jsonresponse

fetch-api

jsonencoder