Javascript 使用来自外部PHP post请求的数据更新HTML内容
我有两页。mobile.html和video.php。mobile.html发送带有单个变量的Javascript 使用来自外部PHP post请求的数据更新HTML内容,javascript,php,html,ajax,post,Javascript,Php,Html,Ajax,Post,我有两页。mobile.html和video.php。mobile.html发送带有单个变量的ajaxpost请求。php应该读取该变量并将其传递给同一页面中的JS函数，该函数将更改视频控件。我试着用这个逻辑： html发送一个ajax post请求 php在div中包含php代码，用于读取请求并获取变量 重新加载video.php并允许同一页面中的JS代码从div内部获取变量 将变量传递给video.php中的预期JS函数 在视频上执行该功能 这是我的代码，为了简单起见，我将视频替换为标签。h
ajax $.post("video.php", {gesture: action}, function(response){
$("#result").html('response: '+response);
});
<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>
//保存post变量值的div
//p内容应更新为$SISTER值
应该使用JS使用post变量更新
//从div获取post变量
var div=document.getElementById（“dom目标”）；
var myData=div.textContent；
$（“#更新”）.html（myData）；
console.log（“myData:+myData”）；
console.log（“myData:+myData”）使用正确的数据，但在mobile.html控制台中！不在video.php控制台中。这意味着代码是在mobile.html中ajax post请求的回调函数中运行的
我在当前打开的video.php页面中找不到更新
的方法。现在我甚至不确定我能不能用PHP来做，因为它只在服务器上运行，而JS只在web浏览器上运行
我的问题是：我能用PHP完成上面解释的步骤吗？
如果是您能帮我找到一种方法，使用mobile.html发送的post呼叫动态、即时更新video.php页面吗？或者其他任何与PHP一起工作的方式
如果没有您能建议我可以使用哪些其他语言/平台来完成我想做的事情吗
更新：
为了了解我想要实现的目标，我使用localstorage
做了两个页面。在一个窗口中打开，然后打开
在另一个窗口并排。播放视频，然后使用mobile.html
上的控件，查看它如何更改video.html
中的播放。
我希望能够远程使用PHP
做同样的事情，因为我必须使用真正的移动设备，而不是mobile.html
您正在将您的手势
值发送到video.PHP
文件，但您没有使用它来获取包含更新值的新段落元素。PHP应该在服务器上工作，JavaScript应该严格在前端
<?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;
?>
保持你的职位要求不变
$.post("video.php", {gesture: action}, function(response) {
$("#result").html('response: ' + response);
});
但是修改服务器返回的响应。手势
值位于$\u 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;
?>
首先，请稍微组织一下代码，以便您能很好地看到代码
您需要将post请求放在具有触发器操作的函数中，因为这样就永远不会调用它
您需要确保在“action”变量（console.log在post之前）中获得正确的数据
（如果由于某种原因，$.post无法工作，请下载jquery并在本地使用，因为它可能不在slim CDN中）
提示：
$（文档）.ready（函数（）{
console.log（手势）；//刷新页面后在控制台中检查此项
$.post（“video.php”，{手势：动作}，函数（响应）{
$（“#结果”）.html（'响应：'+响应）；
});
});
对于那些一直在抱怨不知道如何在不重新加载的情况下实时更新网页的一部分的人，我要回答我自己的问题长话短说，要实现我在问题中提到的情景，我必须使用WebSockets
，正如@EmielZuurbier在第一个答案的评论中指出的那样，因此感谢他
有很多方法可以做到这一点。对于初学者来说，在开始编写代码之前，你必须有耐心，并确保你了解它是如何正常工作的。另外，要知道internet上的一些代码只能在后端工作，并且有一些特定的方法可以使WebSocket在浏览器上工作在我的例子中，我在web浏览器的服务器端使用了Node.js，在客户端使用了同构ws
以下是一些在过去一周对我有帮助的参考资料：
- 这里是安装和文档的官方网站
- 如果您是WebSocket新手，这是一个帮助您入门的方法。它解释WebSocket并显示它的实际实现
- 在这里你可以找到的文件
- 本视频演示如何在本地应用程序中实现websocket
机器（又名笔记本电脑）：
- 请注意上述视频将仅在后端工作，您可以使用mac上的终端或Windows中的命令行运行该后端在一个
浏览器我使用了一个允许
WebSocket在web浏览器上工作
我希望这能帮助那些被困在