如何刷新 DIV 内容？答案

【问题标题】：How do I refresh a DIV content?如何刷新 DIV 内容？
【发布时间】：2016-02-21 11:07:03
【问题描述】：

<div id='here'></div>

我正在尝试刷新一堆 div 中的某个 div。除了在 XMLHttpRequest 的帮助下发送的许多变量之外，div 内容基本上是由 PHP 以及来自 MySQL 数据库的数据生成的。

这个想法是重新加载/刷新 div 本身，而不是加载 php 文件或用.text 或.html 覆盖它。在这种情况下，我不能使用.load('file.php')

我尝试过的：

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

和（每 3 秒刷新一次）：

$(document).ready(function () {
    setInterval(function () {
        $('#here').load('#here'));
    }, 3000);
});

理想情况下，我需要类似：

function reloadDIV () {document.getElementById("here").innerHTML.reload}

function reloadDIV () {$('#here').load(self)}

以便我可以在 onClick 中使用它：

<a onclick='reloadDIV ();'>reload div</a>

【问题讨论】：

您的代码目前无效（额外关闭)，但是为什么您的网址不是加载中的真实网址？
这不是 http 请求的工作方式。如果你想重新计算服务器上的东西，你需要发出一个 http 请求。要将内容加载到 div 中而不刷新页面，您需要发出 ajax 请求。 "I cannot use .load('file.php')" 是什么意思？
尝试$(this).html("<Value>")更新div的内部html。要覆盖 html 内容，请将 html 副本保留为 display:none 并将该 div 中的内容复制到“here” div
只需将 self 替换为提供刷新内容的脚本的 URL。
您应该使用 ajax 来刷新 DIV 内容，具体取决于 PHP 脚本返回的新数据。关于您的代码，您似乎误解了它。为什么你不能只使用$('#here').load('pathToPHP', dataOBJToPass or use string for GET mthod);？？？ jQuery load()

标签： javascript php jquery html

【解决方案1】：

您可以使用 jQuery 使用简单的$.get 方法来实现此目的。 .html 像 innerHtml 一样工作并替换您的 div 的内容。

$.get("/YourUrl", {},
      function (returnedHtml) {
      $("#here").html(returnedHtml);
});

并使用 javascript setInterval 方法调用它。

【讨论】：

他已经在使用 jQuery 和 $.get through load (api.jquery.com/load)
“加载”的问题是它不允许您控制/操作返回的 html。
如果不需要参数，就不要放$.get("/YourUrl", function(returnedHtml){ ... });就够了。

【解决方案2】：

要重新加载页面的一部分，您可以使用 jquerys load 与当前 url 并指定您需要的片段，这将与调用 load 的元素相同，在本例中为 #here：

function updateDiv()
{ 
    $( "#here" ).load(window.location.href + " #here" );
}

不要忽略加载元素选择器中的空间：+ " #here"

这个函数可以在一个区间内调用，也可以附加到点击事件上

【讨论】：

哇。 jQuery 从未停止给我留下深刻印象。
我已经对此进行了测试，这正是我所需要的。谢谢@史蒂夫
这会重新加载特定的 div，但它也会在 div 内部创建具有相同 id 的 div。如何摆脱那个div？刷新前<div id="here"> </div>刷新后<div id="here"> <div id="here"></div> </div>
我也需要这个，但删除了重复的 div。有人知道怎么做吗？
function updateDiv() { $( "#here" ).load(location.href + " #here" ); } 也为我工作而无需复制 div

【解决方案3】：

对于 div 刷新而不在你的内部创建具有相同 id 的 div，你应该在你的函数中使用它

$("#yourDiv").load(" #yourDiv > *");

【讨论】：

在数据变化的意义上刷新。不重新渲染 div
这很棒。谢谢！
这是超级解决方案。

【解决方案4】：

完整的工作代码如下所示：

<script> 
$(document).ready(function(){
setInterval(function(){
      $("#here").load(window.location.href + " #here" );
}, 3000);
});
</script>

<div id="here">dynamic content ?</div>

自重新加载 div 容器每 3 秒刷新一次。

【讨论】：

【解决方案5】：

如果您打算重新加载<div>，这个$("#yourDiv").load(" #yourDiv > *"); 是最好的

确保使用id 而不是class。另外，如果您还没有粘贴 <script src="https://code.jquery.com/jquery-3.5.1.js"></script> 到 html 文件的 <head> 部分，请记住。反之则不行。

【讨论】：