使用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具有相同的行爲。