javascript - 如何将实时 javascript 变量转换为 php 变量?

标签 javascript php html

我对此非常陌生,所以请原谅我的意大利面条代码 - 我正在尝试制作一个网页,在比赛期间实时跟踪篮球统计数据,然后使用 php 保存总统计数据。现在,我只需按一下按钮,将正在实时更新的变量从我的 html 页面传递到 php。我很确定我什至没有接近,但在尝试此操作时收到“未定义索引”消息。这是我的 html 页面:

<head>
  <meta charset="utf-8">
  <title>Scoring</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    var points = 0;
    var assists = 0;
    var rebounds = 0;
    function add1point(){
      points++;
      document.getElementById('displaypoints').innerHTML = '<p>Points: ' + points;
    }
    function add2points(){
      points = points + 2;
      document.getElementById('displaypoints').innerHTML = '<p>Points: ' + points;
    }
    function add3points(){
      points = points + 3;
      document.getElementById('displaypoints').innerHTML = '<p>Points: ' + points;
    }
    function add1assist(){
      assists++;
      document.getElementById('displayassists').innerHTML = '<p>Assists: ' + assists;
    }
    function add1rebound(){
      rebounds++;
      document.getElementById('displayrebounds').innerHTML = '<p>Rebounds: ' + rebounds;
    }
  </script>
  </head>
<body>
  <center>
    <br>
    <button onclick="add1point()">+1 Point (Made Free-Throw)</button>
    <br>
    <br>
    <button onclick="add2points()">+2 Points (Made Field-Goal)</button>
    <br>
    <br>
    <button onclick="add3points()">+3 Points (Made Three-Pointer)</button>
    <br>
    <br>
    <br>
    <button onclick="add1assist()">+1 Assist</button>
    <br>
    <br>
    <br>
    <button onclick="add1rebound()">+1 (Offensive) Rebound</button>
    <br>
    <br>
    <button onclick="add1rebound()">+1 (Defensive) Rebound</button>
    <br>
    <br>
    <br>
    <br>
<form method="post" attribute="post" action="scoring.php">
    <div id="displaypoints"><script type="text/javascript">document.write('<p>Points: ' + points);</script></div>
    <div id="displayassists"><script type="text/javascript">document.write('<p>Assists: ' + assists);</script></div>
    <div id="displayrebounds"><script type="text/javascript">document.write('<p>Rebounds: ' + rebounds);</script></div>
    <br>
    <br>
    <br>
    <input type="submit" name="finish" id="finish" value="Finish Game">
</button>
</form>
  </center>
</body>
</html>

还有我的 php 代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game Finished</title>
</head>
<body>
<?php
$points = $_POST['points'];
$assists= $_POST['assists'];
$rebounds = $_POST["rebounds"];
?>
</p>
</body>

任何帮助都将不胜感激:)

最佳答案

我重写了您的部分代码。我希望你不介意:)。

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <title>Scoring</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <center>
            <br>
            <button onclick="addPoints(1)">+1 Point (Made Free-Throw)</button>
            <br>
            <br>
            <button onclick="addPoints(2)">+2 Points (Made Field-Goal)</button>
            <br>
            <br>
            <button onclick="addPoints(3)">+3 Points (Made Three-Pointer)</button>
            <br>
            <br>
            <br>
            <button onclick="addAssists(1)">+1 Assist</button>
            <br>
            <br>
            <br>
            <button onclick="addRebounds(1)">+1 (Offensive) Rebound</button>
            <br>
            <br>
            <button onclick="addRebounds(1)">+1 (Defensive) Rebound</button>
            <br>
            <br>
            <br>
            <br>
            <form method="post" attribute="post" action="scoring.php">
                <p>Points: <span id="displaypoints"></span></p>
                <p>Assists: <span id="displayassists"></span></p>
                <p>Rebounds: <span id="displayrebounds"></span></p>

                <!-- Any input element with "name" attribute will be sent to server (scoring.php script). -->
                <input type="hidden" name="points" id="points" />

                <!-- Any input element with "name" attribute will be sent to server (scoring.php script). -->
                <input type="hidden" name="assists" id="assists" />

                <!-- Any input element with "name" attribute will be sent to server (scoring.php script). -->
                <input type="hidden" name="rebounds" id="rebounds" />

                <br>
                <br>
                <br>
                <input type="submit" name="finish" id="finish" value="Finish Game">
            </form>
        </center>
        <script type="text/javascript">
            // Initial values
            var points = 0;
            var assists = 0;
            var rebounds = 0;

            // Find "span" element with "displaypoints" id.
            $displayPoints = $("#displaypoints");
            // Set element text to initial points value.
            $displayPoints.text(points);

            // Find "span" element with "displayassists" id.
            $displayAssists = $("#displayassists"),
            // Set element text to initial assists value.
            $displayAssists.text(assists);

            // Find "span" element with "displayrebounds" id.
            $displayRebounds = $("#displayrebounds");
            // Set element text to initial rebounds value.
            $displayRebounds.text(rebounds);

            // Function that receives the amount of points.
            // 1. Adds received amount of points to current amount of points.
            // 2. Sets the corresponding element text to current amount of points.
            // 3. Sets the element that's going to be sent to server value to current amount of points.
            function addPoints(amount){
                points += amount;
                $displayPoints.text(points);
                $("#points").val(points);
            }

            // Function that receives the amount of assists.
            // 1. Adds received amount of assists to current amount of assists.
            // 2. Sets the corresponding element text to current amount of assists.
            // 3. Sets the element that's going to be sent to server value to current amount of assists.
            function addAssists(amount){
                assists += amount;
                $displayAssists.text(assists);
                $("#assists").val(assists);
            }

            // Function that receives the amount of rebounds.
            // 1. Adds received amount of rebounds to current amount of rebounds.
            // 2. Sets the corresponding element text to current amount of rebounds.
            // 3. Sets the element that's going to be sent to server value to current amount of rebounds.
            function addRebounds(amount){
                rebounds += amount;
                $displayRebounds.text(rebounds);
                $("#rebounds").val(rebounds);
            }
        </script>
    </body>
</html>

关于javascript - 如何将实时 javascript 变量转换为 php 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45517255/

相关文章:

html - 图像在 HTML 中对齐

html - IE 11 <main> 未被识别为 block 元素

php - 使用ajax和php的投票系统

javascript - json html 的安全方法?

javascript - 带正则表达式的 URL 路由子字符串

php - Mysqli query Injection ,如何注入(inject)SQL查询字符串?

javascript - JSLint:设置控制台时出现只读错误,即使它被设置为可写全局

php - 该字符串中的引号在哪里出错?

php - 为什么 mysqli 绑定(bind)函数不能正确处理我的字符串?

css - <span> 或 <p> 为 2 个或更多标签显示一个正文文本