使用AJAX的js变量到PHP

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次失误在你的代码中的第一个，该事件在准备好时加载你的窗口进行烧成，这一定是外面：

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

Answer 3

你的PHP脚本应该是：

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

Answer 4

这是一对夫妇不同的解决方案的混合体。在将<g> svg元素直接绑定到onclick事件时，我收到了错误消息。所以我采取了更多的间接路线。我在<g>元素上添加了一个id标记，然后为该事件上的点击事件创建了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具有相同的行为。