为了账号安全,请及时绑定邮箱和手机立即绑定

使用外部 PHP post 请求的数据更新 HTML 内容

使用外部 PHP post 请求的数据更新 HTML 内容

PHP
白衣非少年 2024-01-19 15:23:55
我有两页。mobile.html 和 video.php。mobile.html 发送ajax带有单个变量的 post 请求。video.php 应该读取该变量并将其传递给同一页面中的 JS 函数来更改视频控件。我尝试使用这个逻辑:mobile.html 发送 ajax post 请求video.php 在 div 中有 PHP 代码来读取请求并获取变量重新加载video.php并允许同一页面中的JS代码从div内部获取变量将变量传递给 video.php 中预期的 JS 函数。在视频上执行该功能。这是我的代码,为了简单起见,我用标签替换了视频<p>。mobile.html 代码工作正常。我的问题出在 video.php 中移动.html $.post("video.php", {gesture: action}, function(response){            $("#result").html('response: '+response);          });视频.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” 和 video.php 控制台中的 myData:“PHP no post” ,这没关系,因为显然我第一次运行页面时它不是通过 post 请求。但是,当我单击在 mobile.html 中触发发布请求的按钮时,我得到了该行的输出,console.log("myData: "+myData);其中包含正确的数据,但在 mobile.html 控制台中!不在 video.php 控制台中。意味着代码在mobile.html中的ajax post请求的回调函数中运行。<p id="update">我未能找到更新当前打开的 video.php 页面的方法。现在我什至不确定我是否可以使用 PHP 来做到这一点,因为它仅在服务器上运行,而 JS 仅在 Web 浏览器上运行。我的问题是:我可以使用 PHP 执行上述步骤吗? 如果是,您能帮我找出一种使用从 mobile.html 发送的后调用来动态即时更新 video.php 页面的方法吗?或者任何其他可以与 PHP 一起使用的方式?如果不是,你能建议我可以使用哪些其他语言/平台来做我想做的事情吗?
查看完整描述

3 回答

?
呼唤远方

TA贡献1856条经验 获得超11个赞

您正在将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;

?>


查看完整回答
反对 回复 2024-01-19
?
侃侃尔雅

TA贡献1801条经验 获得超15个赞

有很多方法可以做到这一点。对于初学者来说,在开始编码之前,您必须要有耐心并确保您了解它是如何正常工作的。另外,请注意,互联网上提供的某些代码只能在后端运行,并且有一些特定的方法可以使 Websocket 在浏览器上运行。就我而言,我在服务器端使用 Node.js,在 Web 浏览器的客户端使用 isomorphic-ws。

查看完整回答
反对 回复 2024-01-19
?
Helenr

TA贡献1780条经验 获得超3个赞

首先请稍微组织一下代码,以便您可以清楚地看到代码

  1. 您需要将发布请求放入具有触发操作的函数中,因为这样它就永远不会被调用

  2. 您需要确保在“action”变量中获取正确的数据(在发布之前在console.log中记录它)

(如果 $.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);

    });

});


查看完整回答
反对 回复 2024-01-19
  • 3 回答
  • 0 关注
  • 111 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信