使用來自外部 PHP 發布請求的數據更新 HTML 內容

Question

我有兩頁。 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 和 myData 中的“PHP no post”：video.php 控制台中的“PHP no post”，這是可以的，因為顯然我第一次運行頁面時它不是通過發布請求. 但是，當我單擊在 mobile.html 中觸發發布請求的按鈕時，我得到了這一行console.log("myData: "+myData);的輸出console.log("myData: "+myData); 使用正確的數據，但在 mobile.html 控制台中！ 不在 video.php 控制台中。 意思是代碼運行在mobile.html中ajax post請求的回調函數中。

我沒有找到更新當前打開的 video.php 頁面中的<p id="update">的方法。 現在我什至不確定我可以用 PHP 來做，因為它只在服務器上運行，而 JS 只在 Web 瀏覽器上運行。

我的問題是：我可以使用 PHP 執行上述步驟嗎？ 如果是，你能幫我想出一種使用從 mobile.html 發送的帖子調用動態和即時更新 video.php 頁面的方法嗎？ 或任何其他方式可以與 PHP 一起使用？

如果不能，您能否建議我可以使用哪些其他語言/平台來做我想做的事情？

更新：為了了解我想要實現的目標，我使用localstorage做了兩頁。 開放mobil.html在一個窗口中，然后打開video.html在並排另一個窗口邊。 播放視頻，然后使用mobile.html上的控件並查看它如何更改video.html的播放。 我希望能夠做同樣的事情，但遠程使用PHP因為我必須使用真正的手機而不是mobile.html

Answer 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;
?>

Answer 2

首先請稍微組織一下代碼，以便您可以很好地看到代碼

你需要將 post 請求放在一個帶有觸發器操作的函數中，因為它永遠不會被調用
您需要確保在“action”變量中獲得了正確的數據（在發布之前將其記錄在控制台中）

（如果 $.post 由於某種原因不起作用，請下載 jquery 並在本地使用它，因為它可能不在超薄 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);
    });
});

Answer 3

我正在為那些一直抱怨不了解如何實時更新網頁的一部分而不必重新加載它的人回答我自己的問題。 長話短說，為了實現我在我的問題中提到的場景，我必須像@EmielZuurbier 在第一個答案的評論中指出的那樣使用WebSockets ，所以感謝他。

有很多方法可以做到這一點。 對於初學者，在開始編碼之前，您必須要有耐心並確保您了解它是如何正常工作的。 另外，要知道互聯網上可用的一些代碼只能在后端工作，並且有特定的方法可以使 websockets 在瀏覽器上工作。 在我的例子中，我在服務器端使用Node.js，在 Web 瀏覽器的客戶端使用 isomorphic-ws

以下是過去一周對我有幫助的一些有用參考資料：

這是用於安裝和文檔的Node.js官方站點。
如果您不熟悉 WebSockets，這是一個很好的視頻，可以幫助您入門。 它解釋了 Websockets 並展示了它的真實實現。
在這里您可以找到WebSocket() 的文檔。
該視頻演示了如何在本地機器（又名筆記本電腦）中實現 websocket：如何創建 WebSocket 服務器和客戶端。
請注意，上面的視頻僅適用於后端，您可以使用 Mac 上的終端或 Windows 中的命令行運行。 為了在瀏覽器上工作，我使用了isomorphic-ws ，這是一個允許 websockets 在網絡瀏覽器上工作的包裝器。

我希望這可以幫助像我一樣在如何實現兩端之間的實時通信方面陷入困境的任何人。

使用來自外部 PHP 發布請求的數據更新 HTML 內容

問題描述

3 個解決方案

解決方案1
0 2020-09-11 17:42:39

解決方案2
0 2020-09-12 09:57:43

解決方案3
0 已采納 2020-09-16 19:25:13

使用來自外部 PHP 發布請求的數據更新 HTML 內容

問題描述

3 個解決方案

解決方案1 0 2020-09-11 17:42:39

解決方案2 0 2020-09-12 09:57:43

解決方案3 0 已采納 2020-09-16 19:25:13

解決方案1
0 2020-09-11 17:42:39

解決方案2
0 2020-09-12 09:57:43

解決方案3
0 已采納 2020-09-16 19:25:13