刷新部分页面(div)

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

为此使用Ajax。

构build一个函数,通过Ajax获取当前页面,但不是整个页面,只是从服务器的问题。 然后(再次通过jQuery)将数据放在同一个div中,并用新的replace旧的内容。

相关function:

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

例如

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

请注意,加载会自动replace内容。 确保在idselect器之前包含一个空格。

假设你的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); 

Whereea foo是一个function。

您可以执行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返回types,所以我不会给你一个例子,但我希望这是一个体面的开始。

你需要在客户端做到这一点,例如与jQuery。

假设你想用ID mydiv检索HTML到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请求实现处理程序,并返回/api/mydiv的HTML片段。

看到这个小提琴我为你做了一个有趣的例子,使用JSON获取与JSON响应数据: http : //jsfiddle.net/t35F9/1/

jQuery的$.ajax(), $.get(), $.post(), $.load()函数内部发送XML HTTP请求。 其中load()只是专用于特定的DOM Element 。 查看jQuery Ajax Doc 。 关于这些的细节QA在这里 。