刷新部分页面(div)

Question

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

Answer 1

为此使用Ajax.

构建一个函数,它将通过ajax获取当前页面,但不是整个页面,只是来自服务器的div.然后将数据(再次通过jQuery)放入相同的div中,并用新的内容替换旧内容.

相关功能:

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

例如

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

注意,load会自动替换内容.确保在id选择器之前包含空格.

Answer 2

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

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

java程序本身无法更新html文件的内容,因为html与客户端相关,而java与后端相关.

但是,您可以在服务器(后端)和客户端之间进行通信.

我们所说的是使用JavaScript实现的AJAX,我建议使用jQuery,这是一个常见的JavaScript库.

假设您希望每隔一定时间间隔刷新页面,然后您可以使用interval函数每x次重复相同的操作.

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

你也可以这样做:

setTimeout(foo, 30000);

Whereea foo是一个功能.

您可以执行AJAX请求而不是警报("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数据并且能够返回信息的数据对象,例如(并且非常优选)JSON,但是有许多教程如何这样做,谷歌的GSON是我的东西过了一会儿,你可以看看它.

我不是专业的Java POST接收和JSON返回的那种,所以我不打算给你一个例子,但我希望这是一个不错的开始.

Answer 3

您需要在客户端执行此操作,例如使用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片段的请求实现处理程序.

看看这个我为你做的小提琴有趣的例子,使用jQuery get with JSON响应数据:http://jsfiddle.net/t35F9/1/

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