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

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

  1. mobile.html 发送 ajax post 请求

  2. video.php 在 div 中有 PHP 代码来读取请求并获取变量

  3. 重新加载video.php并允许同一页面中的JS代码从div内部获取变量

  4. 将变量传递给 video.php 中预期的 JS 函数。

  5. 在视频上执行该功能。

这是我的代码,为了简单起见,我用标签替换了视频<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 一起使用的方式?


如果不是,你能建议我可以使用哪些其他语言/平台来做我想做的事情吗?



白衣非少年
浏览 112回答 3
3回答

呼唤远方

您正在将gesture值发送到video.php文件,但没有使用它来获取其中包含更新值的新段落元素。PHP 应该在服务器上工作,而 JavaScript 应该在前端工作。保持您的 POST 请求相同。$.post("video.php", {gesture: action}, function(response) {&nbsp; $("#result").html('response: ' + response);});但修改服务器返回的响应。该gesture值位于$_POST数组中。从那里您可以使用它来渲染一个新段落并将其回显或返回到前端。<?php// Set default value.$gesture = 'none';if ( isset( $_POST[ "gesture" ] ) ) {&nbsp;&nbsp; // Overwrite if there is a gesture value.&nbsp; $gesture = $_POST[ "gesture" ];}// Echo a new paragraph with the gesture in it.echo '<p id="update">' . $gesture . '</p>';exit;?>

侃侃尔雅

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

Helenr

首先请稍微组织一下代码,以便您可以清楚地看到代码您需要将发布请求放入具有触发操作的函数中,因为这样它就永远不会被调用您需要确保在“action”变量中获取正确的数据(在发布之前在console.log中记录它)(如果 $.post 由于某种原因无法工作,请下载 jquery 并在本地使用它,因为它可能不在 slim CDN 中)暗示:$( document ).ready(function() {&nbsp; &nbsp; console.log(gesture); //check this in the console after refreshing the page&nbsp; &nbsp; $.post("video.php", {gesture: action}, function(response){&nbsp; &nbsp; &nbsp; &nbsp;$("#result").html('response: '+response);&nbsp; &nbsp; });});
打开App,查看更多内容
随时随地看视频慕课网APP