为何JS与PHP代码无法实现JS到PHP的传值？（AJAX方式）

首先，你的代码有两个核心问题导致PHP没有输出内容，咱们一个个拆解：

1. PHP执行时机与AJAX请求的本质 #

当你第一次加载sample.php时，PHP代码是在服务器端执行的，这时候浏览器还没发送任何AJAX请求，$_POST['data']根本不存在，所以echo $_POST['data']自然没东西输出。而AJAX是页面加载完成后，在浏览器端发起的独立HTTP请求，这个请求的响应会返回给JS的回调函数，不会自动显示在当前页面上。

2. 变量赋值的异步顺序问题 #

你的AJAX代码是页面一加载就执行，但value是通过ThunkableWebviewerExtension.receiveMessage的回调函数赋值的——这个回调只有当收到message事件时才会触发，大概率AJAX发送请求的时候，value还没被赋值（还是undefined），所以POST过去的数据是空的。

修复后的完整代码 #

先给你改好的代码，再解释关键改动：

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 注意：要先引入jQuery，否则$.ajax会报错 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var ThunkableWebviewerExtension = {
 receiveMessage: function(fxn) {
 var callbackFunction = function(event) {
 if (typeof fxn === 'function') {
 fxn(event.data)
 }
 };
 document.addEventListener('message', callbackFunction, false);
 window.addEventListener('message', callbackFunction, false);
 }
}
</script>
</head>
<body>
<!-- 用来显示AJAX返回的结果 -->
<div id="result"></div>

<script type="text/javascript">
var value;
ThunkableWebviewerExtension.receiveMessage(function(message) {
 value = message; // 拿到值之后再发送AJAX
 sendDataToPHP(value);
});

// 封装AJAX发送逻辑
function sendDataToPHP(data) {
 $.ajax({
 url : "./sample.php",
 method : "POST",
 data: {"data": data},
 success : (res) => { 
 // 把PHP返回的结果显示在页面上
 document.getElementById('result').textContent = "PHP收到的数据：" + res;
 },
 error : (err) => { 
 console.error("请求失败：", err);
 }
 })
}
</script>

<?php
// 区分普通页面请求和AJAX请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 // 如果是AJAX的POST请求，直接返回收到的数据
 echo $_POST['data'];
 exit; // 终止后续输出，避免把HTML也返回给AJAX
}
?>
</body>
</html>

关键改动说明： #

• 引入jQuery：你的代码用了$.ajax，必须先引入jQuery库，否则会报错$ is not defined。
• 调整AJAX发送时机：把AJAX请求放到receiveMessage的回调里，确保拿到value之后再发送，避免发送空值。
• PHP区分请求类型：通过$_SERVER['REQUEST_METHOD']判断是不是POST请求，如果是，就只返回收到的数据，并且用exit终止后续的HTML输出，这样AJAX拿到的就是纯净的数据，而不是整个页面的HTML。
• 添加结果展示区域：在页面里加了一个<div id="result">，用来显示AJAX请求返回的结果，这样你就能直观看到PHP收到的数据了。

其他实现方法 #

如果你不想依赖jQuery，可以用原生的fetch API代替AJAX，替换后的sendDataToPHP函数如下：

function sendDataToPHP(data) {
 fetch("./sample.php", {
 method: "POST",
 headers: {
 "Content-Type": "application/x-www-form-urlencoded",
 },
 body: `data=${encodeURIComponent(data)}`
 })
 .then(res => res.text())
 .then(res => {
 document.getElementById('result').textContent = "PHP收到的数据：" + res;
 })
 .catch(err => console.error("请求失败：", err));
}

另外，如果你是在Thunkable的WebViewer场景下使用，也可以参考Thunkable官方的WebViewer通信规范，但核心逻辑和上述方案一致：确保数据传递时机正确，处理好前后端的请求响应关系。

内容的提问来源于stack exchange，提问作者whitetiger