将点击坐标保存到服务器上的文件中

Question

我目前正在将用户点击坐标输出到控制台并手动保存文件。我正在尝试将这些坐标输出到服务器上的 json 文件中，每次用户点击时都会更新。

<script type="text/javascript">
var clickX;
var clickY;
  onmousemove = function(e){
    clickX = e.clientX;
    clickY = e.clientY;
    console.log('X: '+clickX+', Y: '+clickY);

    var clicks = {"x": "clickX", "y": "clickY"}
    
    $.ajax({
      type : "POST",
      url : "save_json.php",
      data : {
          json : JSON.stringify(clicks)
      }
  });
  }
</script>

<?php
$myFile = "clicks.json";
$fh = fopen($myFile, 'w') or die("can't open file");
$stringData = $_GET["data"];
fwrite($fh, $stringData);
fclose($fh)
?>

但是我无法用我当前的代码做到这一点。

Answer 1

您可能在这里遗漏了很多东西。首先，ajax 调用发出一个 POST 请求，但您正在寻找 $_GET 数组中的数据，所以让我们首先更改 ajax 请求以在此处发出 GET 请求。这使您的 ajax 调用如下所示

$.ajax({
        type : "GET",
        url : "save_json.php",
        data : {
            json : JSON.stringify(clicks)
        }
    });

同样，另一个问题是在var clicks = {"x": "clickX", "y": "clickY"} 中，而不是传递clickX 和clickY 参数，而是将它们作为字符串"clickX" 和"clickY" 传递。这可以通过将其更改为

来解决

var clicks = {"x": clickX, "y": clickY};

最后，您使用 onmousemove 的事件记录了光标所做的每一次移动，而不是真正的点击，基于变量名称和我相信您想要点击的问题，您正在找的是@987654321@

现在 javascript 代码经过修正后如下所示

<script type="text/javascript">
var clickX;
var clickY;
onmouseup = function(e){
    clickX = e.clientX;
    clickY = e.clientY;
    console.log('X: '+clickX+', Y: '+clickY);

    var clicks = {"x": clickX, "y": clickY};

    $.ajax({
        type : "GET",
        url : "save_json.php",
        data : {
            json : JSON.stringify(clicks)
        }
    });
}
</script>

现在来到 PHP 部分，您需要如下修改脚本，您发送的数据在每次点击时都会以 array(1) { ["json"]=> string(17) "{"x":269,"y":125}" } 发送，您要查找的列表项是 "json" 而不是"data"，所以对脚本进行如下修正

<?php
$myFile = "clicks.json";
$fh = fopen($myFile, 'w') or die("can't open file");
$stringData = $_GET["json"];
fwrite($fh, $stringData);
fclose($fh)
?>

有了 clicks.json 文件的正确权限，您应该能够在文件中创建一个条目，如下所示

{"x":798,"y":123}

由于fopen() 中使用的w 模式，每次点击后都会被覆盖