将数据从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是计数器的得分。 我希望每按一次有关用户名的图像就更新分数。

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

无论如何，没有AJAX就能做到这一点吗？

Answer 1

您需要将ajax请求挂接到randomizeImage（）函数。 使用AJAX请求，您可以向已创建的PHP页面发出发布请求，以节省分数。

见AJAX

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

这是JS方面。 PHP方面-您必须检查是否存在带有可变分数的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
}

Answer 2

这样可以将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)
  }
 ?>