刷新部分页面 (div)

Posted 2023-02-22

【中文标题】刷新部分页面 (div)

【英文标题】：Refresh Part of Page (div)

【发布时间】：2013-07-27 00:45:56

【问题描述】：

我有一个附加到 java 程序的基本 html 文件。每当刷新页面时，此 Java 程序都会更新部分 HTML 文件的内容。我只想在每个时间间隔后刷新页面的那一部分。我可以将我想刷新的部分放在div 中，但我不确定如何只刷新div 的内容。任何帮助，将不胜感激。谢谢你。

【参考方案1】：

为此使用 Ajax。

构建一个函数，它将通过 ajax 获取当前页面，但不是整个页面，只是来自服务器的有问题的 div。然后数据将（再次通过 jQuery）放入有问题的同一个 div 中，并用新内容替换旧内容。

相关功能：

http://api.jquery.com/load/

例如

$('#thisdiv').load(document.URL +  ' #thisdiv');

注意，load 会自动替换内容。请务必在 id 选择器之前包含一个空格。

【讨论】：

嘿，伙计，刚刚发现您在 ' （冒号对吗？）之后缺少一个空格，这个例子没有开箱即用 :-) $('#thisdiv')。加载（document.URL + '#thisdiv'）；

这种方法有个很大的缺点。如果您使用它并且页面的一部分重新加载，您将无法再次执行相同的 JQuery/Ajax 操作，而无需在浏览器中重新加载整个页面。使用此方法重新加载后 JQuery 未初始化/将无法再次工作。

你确定我们需要在#标签之前有一个空格吗？如果我删除#tag，我会为我工作。

@GregHilston 这是我的 js 代码 $('#dashboard_main_content').load(document.URL + '#dashboard_content');这是我的 HTML 内容

$('#thisdiv').load(document.URL + ' #thisdiv>*') 防止在原来的#thisdiv 中包含另一个#thisdiv

【参考方案2】：

假设您的 html 文件中有 2 个 div。

<div id="div1">some text</div>
<div id="div2">some other text</div>

java程序本身不能更新html文件的内容，因为html与客户端相关，而java与后端相关。

但是，您可以在服务器（后端）和客户端之间进行通信。

我们说的是AJAX，你使用javascript来实现，我推荐使用jQuery，这是一个常见的JavaScript库。

假设您想每隔固定时间间隔刷新一次页面，那么您可以使用间隔函数每隔 x 次重复相同的操作。

setInterval(function()

    alert("hi");
, 30000);

你也可以这样做：

setTimeout(foo, 30000);

而 foo 是一个函数。

您可以执行 AJAX 请求，而不是 alert("hi")，该请求向服务器发送请求并接收一些信息（例如新文本），您可以使用这些信息将其加载到 div 中。

经典的 AJAX 如下所示：

var fetch = true;
var url = 'someurl.java';
$.ajax(

    // Post the variable fetch to url.
    type : 'post',
    url : url,
    dataType : 'json', // expected returned data format.
    data : 
    
        'fetch' : fetch // You might want to indicate what you're requesting.
    ,
    success : function(data)
    
        // This happens AFTER the backend has returned an JSON array (or other object type)
        var res1, res2;

        for(var i = 0; i < data.length; i++)
        
            // Parse through the JSON array which was returned.
            // A proper error handling should be added here (check if
            // everything went successful or not)

            res1 = data[i].res1;
            res2 = data[i].res2;

            // Do something with the returned data
            $('#div1').html(res1);
        
    ,
    complete : function(data)
    
        // do something, not critical.
    
);

虽然后端能够接收 POST'ed 数据并能够返回信息的数据对象，例如（并且非常优选）JSON，但有很多关于如何做到这一点的教程，来自 Google 的 GSON 是我之前用过的东西，你可以看看。

我对 Java POST 接收和 JSON 返回这类问题并不专业，所以我不会给你举个例子，但我希望这是一个不错的开始。

【讨论】：

您的 Ajax 示例，如何让它实时更新？

【参考方案3】：

您需要在客户端执行此操作，例如使用 jQuery。

假设您要将 HTML 检索到 ID 为 mydiv 的 div 中：

<h1>My page</h1>
<div id="mydiv">
    <h2>This div is updated</h2>
</div>

您可以使用 jQuery 更新页面的这一部分，如下所示：

$.get('/api/mydiv', function(data) 
  $('#mydiv').html(data);
);

在服务器端，您需要为到达 /api/mydiv 的请求实现处理程序，并返回进入 mydiv 的 HTML 片段。

请参阅我为您制作的这个 Fiddle，以获取使用 jQuery get 和 JSON 响应数据的有趣示例：http://jsfiddle.net/t35F9/1/

【讨论】：

很酷的例子，让它变得简单。我们能从中找到任何缺点吗？

【参考方案4】：

使用fetch和innerHTML加载div内容

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() 
  btn.disabled = true;
  dynamicPart.innerHTML = "Loading..."
  dynamicPart.innerHTML = await(await fetch(url)).text();
  setTimeout(refresh,2000);

<div id="staticPart">
  Here is static part of page

  <button id="btn" onclick="refresh()">
    Click here to start refreshing every 2s
  </button>
</div>

<div id="dynamicPart">Dynamic part</div>

【参考方案5】：

$.ajax(), $.get(), $.post(), $.load() jQuery 函数内部发送XML HTTP 请求。 其中load() 仅专用于特定的DOM Element。见jQuery Ajax Doc。详细信息 Q.A.这些是Here。