每次在 wordpress 中更新当前页面的元值时重新加载 div答案

【问题标题】：Reload div each time meta value of current page is updated in wordpress每次在 wordpress 中更新当前页面的元值时重新加载 div
【发布时间】：2021-01-07 23:59:22
【问题描述】：

现在，我有这个：

<?php 

$result = get_metadata('post', 3241, 'progression_aujourdhui', true);
            
?>
            
 <div class="ligne_barre ligne_barre_aujourdhui">
   <div id="progress_bar-aujourdhui" class="progress_bar_salle_presse">
     <h2 class="progress-title"><a href="<?= get_post_permalink(4270); ?>" target="_blank"><?= wp_get_attachment_image(3278, 'full'); ?></a></h2>
      <div class="blocs-barre-progression">
        <div class="skill-item">
          <div class="progression">
            <div class="progress_bar" data-progress-value="<?= $result; ?>" data-progress-equipe="equipe1">
              <div class="progress-value"><?= $result . "%" ?></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

使用简码将代码插入名为“Salle de Presse”的页面中。

这个名为“Salle de Presse”的页面有一个名为“progression_aujourdhui”的元键。

在重新加载“Salle de Presse”页面时，如果元键“progression_aujourdhui”的值已更新，则“data-progress-value”在具有类“progress_bar”的 div 中更新良好。

现在，我希望每次更新元键“progression_aujourdhui”的值时，让具有“ligne_barre”类的 div 重新加载，而不必自己刷新整个页面。

我知道需要 AJAX，但我不确定如何在 wordpress 中使用它，而且“检测何时更新元值”部分让我在互联网上的研究没有成功。

【问题讨论】：

标签： javascript php jquery ajax wordpress

【解决方案1】：

在 wordpress 上建立这将不是一件容易的事。这个问题有两种通用的解决方案。

使用“长池化”，基本上每 n 秒从首页调用您的 wordpress api，并在更改时更新数据。这可能证明代价高昂，因为每个客户端都会轰炸您的后端。
使用 web-sockets 和订阅方法，通常你需要一个带有 nignx 代理的自定义 vps（服务器），启用 tcp 连接，并在数据库更改时获得“订阅”，但仍然是“到谁和在哪里”的逻辑发送此数据库更改信息”将在您身边。 Wordpress 和 websocets 应该足以让你继续前进

祝你好运

【讨论】：

确实看起来很复杂，我什至不知道 websockets 和 nignx 代理是如何工作的，但我会找到文档并让自己找到解决方法，感谢您的建议！

【解决方案2】：

听起来您正在尝试从数据库中检索数据并在前端更新数据而无需重新加载页面。

为此，我在 wordpress 中使用了很多 Ajax 调用，我发现它们很容易做到。

您从前端 JavaScript 进行 Ajax 调用。

Ajax 调用会在您的 function.php 文件中触发一个 PHP 函数。该函数将包含所请求数据的响应发送回前端。

字体结束 JavaScript 然后处理收到的响应并更新页面值等，而无需重新加载网页。

【讨论】：

【解决方案3】：

使用 Ajax。您需要的是使用单个 ajax 会话来获取无限超时的更新。为此，您需要 javascript（我不关心 jquery）和一些 php 钩子。对于 javascript，您可以动态生成它，例如使用 admin_url();输出admin的路径，但正常的静态路径是/wp-admin/admin-ajax.php

给你的元素一个相关的 id。例如，我使用一个按钮来获取数据，所以使用一个 onclick 触发器来发送一个 ajax。

var t0 = performance.now();
var request=document.getElementById('status');
var table=document.getElementById('contents');//div that will contain the updated html
var t1;
 xhr = new XMLHttpRequest();
   xhr.open('POST', '../wp-admin/admin-ajax.php',true);//../ forces root url but just / works
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   xhr.onload = function() {
       if (xhr.status === 200) {
        t1 = performance.now();
           request.innerHTML='Status:Successful Time:'+ (t1-t0) + 'ms';
           table.innerHTML=xhr.responseText;
//polymorphism here, recall the ajax function
       }
       else if (xhr.status !== 200) {
        t1 = performance.now();
           request.innerHTML='Status:Failed Time:'+ (t1-t0) + 'ms -'+xhr.status;
//polymorphism here, recall the ajax function
       }
 xhr.send("action=me_action&mevar1="+me_value+"&..."+status);

在 php 方面你需要这个：

add_action("wp_ajax_me_action", "me_function");
function me_function(){
$response='your response here';
$mevar=$_Request['mevar1'];.....
echo $response;

}

为了提高性能，请在 php.ini 中设置 output_buffering=On 或 1（不要使用设置限制，因为较小的输出会导致延迟），因为大型请求可以更有效地通过网络打包并进行压缩。

要不断更新或重新检查，只需使用

setTimeout(my-ajax-function,0);

但如果服务器对此有超时，则使用 setInterval(my-ajax-function,less-then-server-timeout-in-milliseconds);

许多 wordpress 设置已经很繁重，运行 php 需要服务器上的大量资源，虽然静态网页可以在 50 毫秒内交付，但对于大多数安装，您的 wordpress 响应往往会在 500 毫秒-1 秒内交付，除非您实际上知道如何优化它（我从头开始提供的服务，从服务器到 wordpress）。我没有使用 jquery，因为如果您几乎不需要它的页面，请避免使用它来节省资源。对于您的 ajax 调用也是如此，尽可能少地请求并尝试在 1 个请求中获取所有内容。这适用于其他与 wordpress 相关的工作，例如使用 wordpress REST API，因为每个请求都会增加显着的延迟，最终可能会从几秒变为几分钟。包含 100 个列出的项目和 100 个请求的页面可能需要 50 秒，并且会占用大量 CPU，因此请在 1 个或尽可能少的请求中完成所有操作。

【讨论】：