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的事件记录光标所做的每一次移动而不是真正的点击，基于变量名称和我认为您想要点击的问题，事件您正在寻找的是onmouseup

现在，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}" }的形式发送，您要查找的列表项是{{1而不是"json"，所以对脚本进行如下修正

"data"

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

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

并且因为{"x":798,"y":123}

中使用w模式而在每次点击后都会被覆盖

将点击坐标保存到服务器

1 个答案: