为什么这段 JS 和 PHP 代码不起作用？（我正在尝试将值从 JS 发送到 PHP）答案

【问题标题】：Why doesn't this JS & PHP code work? (I am trying to send a value from JS to PHP)为什么这段 JS 和 PHP 代码不起作用？（我正在尝试将值从 JS 发送到 PHP）
【发布时间】：2021-02-12 15:46:12
【问题描述】：

我有一个名为 sample.php 的文件，其中包含此代码，其任务是通过 AJAX 将一个变量值从 JS 发布到 PHP。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <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>
<script type="text/javascript">
  var value;
  ThunkableWebviewerExtension.receiveMessage(function(message) {
      value = message; //this is the value I want to send to PHP
  });
  
//sending the value with ajax (POST)

  return new Promise((resolve, reject) => {
        $.ajax({
          url : "./sample.php", //same file
          method : "POST",
          data: {"data": value},
          
          success : (res) => {
            resolve(res)
          },
          error : (res) => {
            reject(res)
          }
        })
  })
</script>

<?php
echo $_POST['data']; //nothing comes here...
?>

</body>
</html>

我唯一的目标是在 PHP 中访问 value 变量的值（在 JS 端）。我开始知道这可以用 AJAX 来完成，所以我尝试了，但没有成功 - PHP 代码没有回显任何内容......问题出在哪里？

替代方法（用于在 PHP 中访问 JS 变量的值）非常受欢迎。 :)

【问题讨论】：

标签： javascript php html ajax post

【解决方案1】：

首先，为了运行 ajax 功能，您需要jQuery。然后，您必须从 ajax 调用中删除 promise，因为根据 documentation -“从 jQuery 1.5 开始，$.ajax() 返回的 jqXHR 对象实现了 Promise 接口，为它们提供了所有属性、方法和Promise 的行为”

<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<head>
  <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>
<script type="text/javascript">
  var value ;
  ThunkableWebviewerExtension.receiveMessage(function(message) {
      value = message; //this is the value I want to send to PHP
  });
  
//sending the value with ajax (POST)
$.ajax({
          url : "./sample.php", //same file
          method : "POST",
          data: {"data": value},
          
          success : (res) => {
            console.log(res);
          },
          error : (res) => {
            console.log(res);
          }
        })
</script>
<?php
echo $_POST['data']; //nothing comes here...
?>
</body>
</html>

如果您在添加此解决方案后出现Undefined Index: data 错误，您可以在您的JS 代码中为value 变量添加示例值。

【讨论】：

为您的答案投票，但最好解释一下为什么要删除 Promise。根据文档-“从 jQuery 1.5 开始，$.ajax() 返回的 jqXHR 对象实现了 Promise 接口，为它们提供了 Promise 的所有属性、方法和行为”，所以是的，你是对的，Promise 可以被删除！ - api.jquery.com/jquery.ajax