如何在同一页面内将值从 Js 传递到 PHP [重复]

Posted 2023-05-08

【中文标题】如何在同一页面内将值从 Js 传递到 PHP [重复]

【英文标题】：how to pass a value from Js to PHP within the same page [duplicate]

【发布时间】：2021-12-26 18:34:30

【问题描述】：

我有一个画布，我已经在那里画了我的圆圈（来自 mysql DB 的中心和半径）。 此外，在某些情况下（来自 DB），圆圈会被填充为红色。

现在我必须这样做：

当用户点击红色圆圈时，我应该显示一个弹出窗口（我想是警报），其中包含从 MySQL 获取的数据

我已经能够使用 javascript 定位用户单击的像素的坐标，并且我能够获取该像素的颜色。

我需要的是：

如果像素是红色的，我应该将该信息传递给 php（同一页面），然后我应该从 DB 中获取一些数据。

我在网上找到了很多功能，Ajax 或 JQuery，但我真的无法集成到我的 PHP...

我的相关代码如下：

//这个Js函数获取用户点击的像素的坐标和颜色

<script language="javascript">
    function getCursorPosition(canvas, event) 
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        //console.log("x: " + x + " y: " + y);
        
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        
        var pixel = ctx.getImageData(x, y, 1, 1).data; 
        var hex = "#" + ("000000" + rgbToHex(pixel[0], pixel[1], pixel[2])).slice(-6);
        
        alert("x: " + x + " y: " + y + " hex: " + hex);
    
</script>

...

//绘制画布并监听事件mousedown

<?php
    echo("<div id='text' style='text-align:center;'>");
    echo("<canvas id='myCanvas' width='400' height='600' style='border:1px solid #000000;'></canvas>");
?>
    <script>
        var canvas = document.getElementById('myCanvas'); 
        canvas.addEventListener("mousedown", function (e)  getCursorPosition(canvas, e););
    </script>
<?php
    echo("</div>"); 
    

...

//循环从DB获取中心和半径并在画布上绘制圆

$sqltextval = "SELECT * FROM table WHERE col='somevalue'";
$connval = mysqli_query($id,$sqltextval);
if ($rowval = mysqli_fetch_object($connval))

    //fill circle in red
    echo("<script type='text/javascript'>");
    echo("fill_circle($X, $Y, $radius);");
    echo("</script>;");
 
else

    //circle not filled in
    echo("<script type='text/javascript'>");
    echo("draw_circle($X, $Y, $radius);");
    echo("</script>;"); 

【问题讨论】：

由于 JS 在客户端和 PHP 服务器端运行，因此您需要向服务器发出 AJAX 请求，在 PHP 中处理该请求，然后将响应发送回并使用 JS 响应。

您上面的所有代码都用于画布生成，但问题在于服务器/客户端通信。您对客户端/服务器通信进行了哪些尝试？如果它不尝试解决您发布的问题，那么您要使用的代码是无关紧要的。

"我在网上找到了很多函数，Ajax 或 JQuery，但我真的无法集成到我的 PHP 中" - 这是正确的做法，所以告诉我们你尝试了什么，你在哪里卡住了，发生了什么......

【参考方案1】：

我建议你试试fetch

const componentToHex = c => 
  let hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex
;
const rgbToHex = (r, g, b) => "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);


function getCursorPosition(canvas, event) 
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  //console.log("x: " + x + " y: " + y);

  var ctx = canvas.getContext("2d");
  ctx.beginPath();

  var pixel = ctx.getImageData(x, y, 1, 1).data;
  var hex = "#" + ("000000" + rgbToHex(pixel[0], pixel[1], pixel[2])).slice(-6);

  return "x: " + x + " y: " + y + " hex: " + hex;


var canvas = document.getElementById('myCanvas');
canvas.addEventListener("mousedown", function(e) 
  const pos = getCursorPosition(canvas, e);
  console.log(pos); 
  // uncomment next line to send to server
  // fetch('server.php?' + new URLSearchParams( pos: pos ))
);

<div id='text' style='text-align:center;'>
  <canvas id='myCanvas' width='400' height='600' style='border:1px solid #000000;'></canvas>
</div>

【讨论】：

谢谢@mplungjan！

我会尽快尝试，但是“server.php”是什么？

你的服务器进程 - 你选择它的名字

嗯，好的，谢谢，那么它是包含此代码的 php 文件的名称对吗？

它有效！！！！惊人的！！！非常感谢大家！