使用 AJAX 将 js 变量转换为 PHP答案

【问题标题】：js variables to PHP using AJAX使用 AJAX 将 js 变量转换为 PHP
【发布时间】：2016-09-09 18:20:30
【问题描述】：

尝试使用 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 文件。
您在 AJAX 调用中使用 POST 方法，因此您必须在 php 脚本中检查 $_POST 而不是 $_GET。
clicked 是如何被调用的？为什么$( document ).ready(function() {在那个函数里面？
Pass Javascript variable to PHP via ajax的可能重复
你如何假装clicked函数被调用？你能发布你的 HTML 代码吗

标签： php html mysql

【解决方案1】：

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

请像下面这样重写 PHP 代码

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

并检查它是否有效

【讨论】：

@muzibaloutche，提醒 javascript 中 x 的值。它显示了什么？
还是什么都没有。我可以从控制台看到这一点：play.php:49 Uncaught ReferenceError: $ is not defined for this line: $( document ).ready(function() {
您必须在开始您的 jquery 代码之前包含 jquery 库。您将从developers.google.com/speed/libraries/#hammerjs 获得它。根据文档添加
也这样做了。还是什么都没有，阿伦。

【解决方案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';
}

【讨论】：

用你的方法，我得到了写在那个特定页面上的所有内容，作为一个很长的 n 冗长的警报消息（我的页面的所有脚本），它大于我的屏幕大小，没有关闭按钮.我不得不强制退出 eclipse n 然后重新启动它才能再次工作。
为元素设置 id 并使用选择器获取它：<g id="square" ... 和类似$('#square') ...@muzibaloutche 的方法

【解决方案3】：

您的 PHP 脚本应该是：

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

【讨论】：

【解决方案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);
            }
        });
    }
});

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

【讨论】：

我仍然无法在我的其他 php 页面中回显 x 加上您的解决方案，我可以在控制台中看到 x 和 y 但在其他 html 页面中，它仍然是“没有收到变量”被回显，加上带有“success X:”的警告窗口仍然很大，其中包含页面的所有脚本。