将数据从 html 带到 php 并将其发布到数据库

Question

<img id="image" src="jj.png" onclick="randomizeImage();"/>
<h2 id="Score" name="Score1">0</h2>

<script>
    var counter=0;
    function randomizeImage() {
        counter++;
        var test= document.getElementById('Score');
        test.innerHTML= counter;
    }
</script>

<?php
    $con = mysql_connect("localhost","root");
    if (!$con)
    {
        die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("database", $con);

    $user_Name = $_COOKIE["username"]; //i stored the username as a cookie and retrieved it here 
    echo $user_Name; //echo it so i can check if it is right

    $New= $_POST["Score"]; //**this is the part which is undefined**

    $sql = "UPDATE User SET Score = '$New' WHERE ID='$user_Name'";

    if (!mysql_query($sql,$con))
    {
        die('Error please try again ' . mysql_error());
    }

    mysql_close($con)

?>

我有一个图像，每当我单击它时，它都会调用一个函数，该函数将使计数器增加 1。这个分数将反映在 html 端，并在我单击图像时增加。但是现在我想把这个计数器数据带入 php 中，我可以将它上传到一个数据库中，它与他/她在以前的 phpfile 中输入的用户用户名相匹配。我不能把分数的价值带过来吗？它一直说未定义的索引。

我有两个名为 ID 和 Score 的列。 ID 是我为用户的用户名评分的地方，Score 是计数器的分数。我希望每次按用户名的图像时更新分数。

数据库名称是 :database 表名是：用户

在没有 AJAX 的情况下有没有办法做到这一点？

Answer 1

这就是您可以向服务器发送ajax 请求的方式。确保首先包含jquery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <script>
    var counter=0;
    function randomizeImage() {
      counter++;
      var test= document.getElementById('Score');
      test.innerHTML= counter;

      $.ajax
      (
          "ajax.php",
          {
              method: "POST",
              data: { score: counter}
          }
      );
    }
  </script>

接下来你必须把你的 PHP 代码放到一个单独的文件中，我称之为“ajax.php”。

<?php

    $score = filter_input(INPUT_POST, "score");
    if (isset($score) && $score != "") {

    $con = mysql_connect("localhost","root");
    if (!$con)
    {
       die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("database", $con);
    $user_Name = $_COOKIE["username"]; //i stored the username as a cookie and retrieved it here 
    echo $user_Name; //echo it so i can check if it is right

   $sql = "UPDATE User SET Score = '$score' WHERE ID='$user_Name'";
   $result =mysql_query($sql) or die("could not update" . mysql_error);

  if (!mysql_query($sql,$con))
  {
    die('Error please try again ' . mysql_error());
  }
  mysql_close($con)
  }
 ?>

Answer 2

您需要将 ajax 请求挂接到 randomizeImage() 函数。使用 AJAX 请求，您可以向您创建的 PHP 页面发出 post 请求，以便保存分数。

见AJAX

function randomizeImage() {
  counter++;
  var test= document.getElementById('Score');
  test.innerHTML= counter;
  $.post("yourphpfile.php", {score: counter}, function(result) {
      //should be saved
  }
}

这是 JS 方面。 PHP 方面 - 你必须检查是否有带有变量 score 的 POST 请求。

<?php
if (isset($_POST['score'])) {
     $score = intval($_POST['score']);
     //check if user already has score.
     $scoreQuery = "SELECT score FROM tbl WHERE username = '$username'";
     //run the query, if user has score:
     $query = "";
     if (user has score already) {
          $query = "UPDATE tbl SET score = score + $score WHERE username = '$username'";
     } else {
          $query = "INSERT INTO tbl (score, username) VALUES ($score, '$username');
     }
     //run the query
}