Question

尝试使用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';
   }
?>

Answer 1

您正在使用“POST”发送数据并接受使用“GET”

请重写下面的PHP代码

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

并检查它是否有效

Answer 2

根据您的HTML，您可以点击绑定，如下所示，here the example working您的代码中有2个错误，第一个，当您的窗口加载时触发事件就绪，因此必须在外面：

.indicatorsEnabled(true);

第二，你通过GET获得参数，它们应该通过POST获得。

$( 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);
       }

     });  
   });
});

Answer 3

您的PHP脚本应该是：

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

Answer 4

这是几种不同解决方案的混合体。将<g> svg元素直接与onclick事件绑定时，我收到了错误消息。所以我采取了一些更间接的路线。我在id元素中添加了<g>标记，然后为其创建了一个jQuery监听器，然后调用该函数。这是一个jsfiddle：https://jsfiddle.net/aedo6pmc/2/

这里是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>

和javascript：

$( 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);
            }
        });
    }
});

刚刚注意到何塞更新了他的答案，包括相同类型的方法。他将其直接绑定到svg元素，这可能就足够了，但请确保如果您的网页在页面上有多个svg，那么您希望每个svg具有相同的行为

使用AJAX将PHP变为PHP

4 个答案: