使用AJAX将js变量转换为PHP

尝试使用AJAX从php页面xyz.php中的play.php发送javascript变量x和y，但无法执行此操作。你们能告诉我这里怎么了吗

function clicked(evt){
            var e = evt.target;
            var dim = e.getBoundingClientRect();
            var x = evt.clientX - dim.left;
            var y = evt.clientY - dim.top;

            $( document ).ready(function() {

                $.ajax({
                   type: "POST",
                   url: 'play.php',
                   data: {X: x },
                   success: function(data)
                   {
                      alert("success! X:" + data);
                   }

                 });

              });
}

在xyz.php中

<?php 
   if (isset($_GET["X"])) {
     $x = $_GET["X"];
     echo $x;
   }else{
     echo 'no variable received';
   }
?>   

---

您使用“POST”发送数据，使用“GET”接受数据

请像下面这样重写PHP代码

<?php 
if (isset($_POST["X"])) {
    $x = $_POST["X"];
    echo $x;
}else{
    echo 'no variable received';
}
?>  

---

并检查它是否工作

根据您的HTML，单击即可绑定如下所示，您的代码中有两个错误第一个错误，在加载窗口时触发事件准备就绪，因此这必须在外部：

$( document ).ready(function() {
   //svg selector you can adapt it what you need
   $('svg').on('click', function(evt){
     var e = evt.target;
     var dim = e.getBoundingClientRect();
     var x = evt.clientX - dim.left;
     var y = evt.clientY - dim.top;

     $.ajax({
       type: "POST",
       url: 'play.php',
       data: {X: x },
       success: function(data)
       {
           alert("success! X:" + data);
       }

     });  
   });
});

其次，你要通过GET获取参数，它们应该通过POST获取

if (isset($_POST["X"])) {
 $x = $_POST["X"];
 echo $x;
}else{
  echo 'no variable received';
}

---

您的PHP脚本应该是：

<?php 
    if ( isset($_POST["X"]) ) {
        $x = $_POST["X"];
        echo $x;
   }else{
       echo 'no variable received';
   }
?>

---

这是两种不同解决方案的混合。我在将

svg元素直接与

onclick

事件绑定时收到错误消息。所以我选择了一条更为间接的路线。我在

元素中添加了一个

id

标记，然后为该元素上的单击事件创建jQuery侦听器，然后调用该函数。下面是一个JSFIDLE：

以下是

svg

元素：

<svg xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="500" height="500"> <g transform="translate(30 30)" id="gSquare"><rect id="rect1" x="0" y="0" width="50" height="50" fill="red"/></g> </svg>

---

刚刚注意到Jose更新了他的答案，加入了相同类型的方法。他将其直接绑定到

svg

元素，这可能就足够了，但请确保如果页面上有多个

svg

，那么您希望每个

svg

都有相同的行为。您正在执行POST请求，并且通过GET方法获取php文件。您在AJAX调用中使用了POST方法，因此，您必须在php脚本中检查$\u POST而不是$\u GET。如何调用

单击的

？为什么

$（document）.ready（function（）{

在该函数内？可能重复如何调用

单击的

函数？是否可以发布HTMLcode@muzibaloutche，警告javascript中x的值。它显示了什么？仍然没有显示。我可以从控制台中看到：play.php:49 uncaughtreferenceerror:$未为此行定义：$（document）。准备好了吗（function（）{在启动jquery代码之前，您必须包含jquery库。您将从中获得它。根据docs add，您也这样做了。仍然没有，Arun。使用您的方法，我会将该特定页面上写入的所有内容作为一条长n长的警报消息（我的页面脚本）它比没有关闭按钮的屏幕大。我必须强制退出eclipse n，然后重新启动它才能再次工作。将id设置为元素，并使用选择器获取它：

我仍然无法在我的另一个php页面中回显x，并且使用您的解决方案，我可以在控制台中看到x和y，但在另一个html页面中，它仍然是“未收到变量”被回响，加上带有“success X:”的警报窗口仍然很大，页面的所有脚本都在其中。
$( document ).ready(function() {
    $('#gSquare').on('click', function(e){
        e.preventDefault();
        clicked(e);
    });

    function clicked(evt){
        e = evt.target;
        dim = e.getBoundingClientRect();
        x = evt.clientX - dim.left;
        y = evt.clientY - dim.top;
        console.log(x + ' ' + y);

        $.ajax({
            type: "POST",
            url: 'play.php',
            data: {X: x },
            success: function(data)
            {
                alert("success! X:" + data);
            }
        });
    }
});