使用来自外部 PHP 发布请求的数据更新 HTML 内容答案

【问题标题】：Update HTML content with data from external PHP post request使用来自外部 PHP 发布请求的数据更新 HTML 内容
【发布时间】：2020-12-30 01:50:48
【问题描述】：

我有两页。 mobile.html 和 video.php。 mobile.html 发送带有单个变量的ajax 发布请求。 video.php 应该读取该变量并将其传递给同一页面中的 JS 函数，该函数将更改视频控件。我尝试使用这个逻辑：

mobile.html 发送 ajax 发布请求
video.php 在 div 中有 PHP 代码，用于读取请求并获取变量
重新加载video.php，让同一页面的JS代码从div里面获取变量
将变量传递给 video.php 中的预期 JS 函数。
对视频执行函数。

这是我的代码，为简单起见，我将视频替换为 <p> 标签。 mobile.html 代码工作正常。我的问题在 video.php

mobile.html

 $.post("video.php", {gesture: action}, function(response){
           $("#result").html('response: '+response);
         });

video.php

<html>
<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
//a div to hold the value of post variable
  <div id="dom-target" style="display: none">
    <?php
    if ( $_SERVER['REQUEST_METHOD'] == 'POST' )
    {
      
      
    if( isset($_POST["gesture"]))
      {//put the variable value inside the div to fitch it later
        $gesture = $_POST["gesture"];
        echo $gesture;
      }
      else {
        echo "none";
      }
    }
    else {
      echo json_encode("PHP no post");
    }

    ?>
  </div>
//p content should be updated with the value of $gesture
  <p id="update">
    should be updated with post variable using JS 
  </p>
  <script>
//get post variable from the div
  var div = document.getElementById("dom-target");
  var myData = div.textContent;
  $("#update").html(myData);

console.log("myData: "+myData);

</script>
</body>
</html>

我已经花了一周的时间试图解决这个问题，但我似乎无法得到我想要的结果，因为当我重新加载页面时，我在 ajax 回调函数中找到了我的变量：/

我目前得到的输出是 video.php 中的 "PHP no post" 和 myData: video.php 控制台中的 "PHP no post" 这没关系，因为显然我第一次运行页面时没有通过发布请求。但是，当我单击触发 mobile.html 中的发布请求的按钮时，我会在 mobile.html 控制台中获得带有正确数据的 console.log("myData: "+myData); 行的输出！不在 video.php 控制台中。意思是代码运行在mobile.html中ajax post请求的回调函数中。

我未能找到更新当前打开的 video.php 页面中的<p id="update"> 的方法。现在我什至不确定我是否可以使用 PHP，因为它只在服务器上运行，而 JS 只在 Web 浏览器上运行。

我的问题是：我可以使用 PHP 执行上述步骤吗？ 如果是你能帮我找出一种方法，使用从 mobile.html 发送的 post call 来动态和即时更新 video.php 页面吗？或任何其他适用于 PHP 的方式？

如果不是，您能否建议我可以使用哪些其他语言/平台来做我想做的事情？

更新： 为了了解我想要实现的目标，我使用localstorage 做了两页。在一个窗口中打开mobil.html，然后打开video.html 在另一个窗口并排。播放视频，然后使用mobile.html 上的控件，看看它如何改变video.html 中的播放。我希望能够做同样的事情，但远程使用PHP，因为我必须使用真正的手机而不是mobile.html

【问题讨论】：

您可以在调用 ajax 时在 $_SESSION 中使用 store $gesture，当您来到 video.php 页面时，请检查会话值是否为空，显示该值或不要在此处直接使用 ajax重定向到所需页面。
有点不清楚您要在这里构建什么。我很确定 PHP 和 JS 有办法构建你想要的东西，但我认为你的方法应该不同。一旦你解释了结果应该是什么，我会尽力帮助你。
@EmielZuurbier 我要做的是在 video.php 中动态更新<p>，只要它从 mobile.html 收到ajax post call。相反，我得到的是我在 video.php 中的JS 代码的结果在ajax callback function 的mobile.html 中执行，而不是在video.php 中更新<p>
@Swati 我尝试仅在 video.php 中使用 $_SESSION。你的意思是我也应该在 mobile.html 中使用$_SESSION 吗？

标签： javascript php html ajax post

【解决方案1】：

您将gesture 值发送到video.php 文件，但您没有使用它来获取其中包含更新值的新段落元素。 PHP 应该在服务器上完成它的工作，而 JavaScript 应该严格在前端完成。

保持您的 POST 请求不变。

$.post("video.php", {gesture: action}, function(response) {
  $("#result").html('response: ' + response);
});

但是修改服务器返回的响应。 gesture 值在 $_POST 数组中。从那里您可以使用它来呈现新段落并回显或将其返回到前端。

<?php

// Set default value.
$gesture = 'none';
if ( isset( $_POST[ "gesture" ] ) ) { 
  // Overwrite if there is a gesture value.
  $gesture = $_POST[ "gesture" ];
}

// Echo a new paragraph with the gesture in it.
echo '<p id="update">' . $gesture . '</p>';
exit;
?>

【讨论】：

这是对的，我得到了我想要的 $gesture 的值，但结果没有出现在当前打开的 video.php 页面中。它出现在mobile.html中ajax post调用的回调函数的响应中。所以我想要做的是更新每次我从mobile.html发出post调用时在浏览器中打开的video.php。我希望它很清楚
啊，现在好了。您想通过通信打开视频页面的选项卡并从移动页面控制其中的一些内容，对吗？您正在寻找Web Sockets API 或Broadcast Channel API。您不能真正使用 HTTP 与其他页面“交谈”。 Web Sockets 将是最适合您的情况的一种。
您正在尝试为您的视频构建遥控器？
没错！我正在尝试构建一个遥控器。请参阅我的问题中的更新以查看我添加的示例。我认为 Web Sockets API 很有意义。我会尝试他们并回来。谢谢

【解决方案2】：

首先请将代码整理一下，以便您可以很好地查看代码

您需要将发布请求放入带有触发操作的函数中，因为这样就永远不会调用它
您需要确保在“操作”变量中获取正确的数据（在发布之前将其记录在控制台中）

（如果 $.post 由于某种原因无法正常工作，请下载 jquery 并在本地使用它，因为它可能不在 slim CDN 中）

提示：

$( document ).ready(function() {
    console.log(gesture); //check this in the console after refreshing the page
    $.post("video.php", {gesture: action}, function(response){
       $("#result").html('response: '+response);
    });
});

【讨论】：

请参考我的问题更新部分中的示例，以便更好地了解我的问题。目前，mobile.html 完全按照它应该的方式工作。我的问题是在读取 post 变量后更新 video.php 的内容。我将遵循 Emiel Zuurbier 的建议，使用他建议的 API 之一，并为大家更新。谢谢

【解决方案3】：

我正在为那些一直抱怨不了解如何实时更新网页的一部分而无需重新加载它的人回答我自己的问题。 长话短说，为了实现我在问题中提到的场景，我必须使用@EmielZuurbier 在第一个答案的cmets 中指出的WebSockets，所以感谢他。

有很多方法可以做到这一点。对于初学者，您必须要有耐心，并确保在开始编码之前了解它是如何正常工作的。另外，要知道互联网上的一些代码只能在后端工作，并且有一些特定的方法可以让 websocket 在浏览器上工作。 在我的例子中，我在服务器端使用 Node.js，在 Web 浏览器的客户端使用 isomorphic-ws

这里有一些在过去一周对我有帮助的参考资料：

这里是Node.js 的官方网站，用于安装和文档。
如果您是 WebSockets 新手，这是一个 good video 帮助您入门。它解释了 Websockets 并展示了它的真实实现。
在这里您可以找到WebSocket() 的文档。
本视频演示了如何在本地实现 websocket 机器（又名笔记本电脑）：How to Create a WebSocket Server & Client.
请注意，上面的视频只能在后端运行，您可以使用 Mac 上的终端或 Windows 中的命令行运行。 在一个浏览器 我使用了isomorphic-ws，它是一个允许 websockets 在网络浏览器上工作。

我希望这可以帮助像我一样被困在如何实现两端之间的实时通信的任何人。

【讨论】：