html 刷新部分页面(div)

hl0ma9xz  于 2022-11-27  发布在  其他
关注(0)|答案(6)|浏览(375)

我有一个基本的html文件,它被附加到一个java程序中。这个java程序在页面刷新时更新HTML文件的一部分内容。我只想在每个时间间隔后刷新页面的那一部分。我可以把我想刷新的部分放在一个div中,但我不知道如何只刷新div的内容。如有任何帮助将不胜感激。谢谢。

2ul0zpep

2ul0zpep1#

请使用 AJAX 。
构建一个函数,通过 AJAX 获取当前页面,而不是整个页面,只从服务器获取相关的div,然后将数据(再次通过jQuery)放入相同的div中,并用新内容替换旧内容。
相关功能:
http://api.jquery.com/load/
例如:

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

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

xmd2e60i

xmd2e60i2#

假设html文件中有2个div。

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

java程序本身不能更新html文件的内容,因为html与客户端相关,而java与后端相关。
但是,您可以在服务器(后端)和客户端之间进行通信。
我们讨论的是 AJAX ,它是使用JavaScript实现的,我建议使用jQuery,这是一个常见的JavaScript库。
让我们假设您希望每隔一个固定的时间间隔刷新页面,那么您可以使用interval函数每隔x次重复相同的操作。

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

您也可以这样做:

setTimeout(foo, 30000);

其中a 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返回的专业人员,所以我不打算给予你一个例子,但我希望这是一个不错的开始。

piah890a

piah890a3#

您需要在客户端执行此操作,例如使用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/

9rbhqvlz

9rbhqvlz4#

使用fetchinnerHTML加载div内容
第一个

6bc51xsx

6bc51xsx5#

jQuery的$.ajax(), $.get(), $.post(), $.load()函数在内部发送XML HTTP请求。其中,load()仅专用于特定的DOM Element。请参见jQuery Ajax Doc。有关Here的详细问题解答。

uxhixvfz

uxhixvfz6#

我使用下面的代码更新我的div中包含文件的数据,这需要jQuery,但这是迄今为止我所见过的最好的方法,并且不会混淆焦点。完整的工作代码:

在代码中包含jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

创建以下函数:

<script type="text/javascript">
    function loadcontent() {
      $("#test").load("test.html");
      //add more lines / divs 
    }
</script>

在页面加载后加载函数;和刷新:

<script type="text/javascript">
    $( document ).ready(function() {
      loadcontent();
    });
    setInterval("loadcontent();",120000);
</script>

时间间隔以毫秒为单位,120000 = 2分钟。使用您在div中的函数中设置的ID,这些ID必须是唯一的:

<div id="test"></div><br>

相关问题