刷新页面的一部分（div）

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

为此使用Ajax。

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

相关功能：

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

例如

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

注意，加载会自动替换内容。请确保在ID选择器之前包含一个空格。

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

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

Java程序本身无法更新html文件的内容，因为html与客户端有关，而java与后端有关。

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

我们正在谈论的是使用JavaScript实现的AJAX，我建议使用jQuery（这是一个常见的JavaScript库）。

假设您要在每个固定间隔刷新页面，然后可以使用间隔函数每x次重复相同的操作。

setInterval(function()
{
    alert("hi");
}, 30000);

您也可以这样：

setTimeout(foo, 30000);

其中foo是一个函数。

代替alert（“ hi”），您可以执行AJAX请求，该请求将请求发送到服务器并接收一些信息（例如新文本），您可以使用该信息加载到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的数据并能够返回信息的数据对象，例如（非常可取的）JSON，那里有许多关于如何这样做的教程，而Google的GSON正是我所追求的前一阵子，你可以看看它。

我在Java POST接收和JSON返回等方面并不专业，因此我不打算为此举一个例子，但我希望这是一个不错的开始。

您需要在客户端使用jQuery这样的功能。

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

<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/

使用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>

$.ajax(), $.get(), $.post(), $.load()jQuery函数内部发送XML HTTP请求。其中load()仅用于特定的DOM Element。参见jQuery Ajax Doc。关于这些的详细质量检查在这里。