Html 刷新部分页面 (div)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17886578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh Part of Page (div)
提问by user760220
I have a basic html file which is attached to a java program. This java program updates the contents of part of the HTML file whenever the page is refreshed. I want to refresh only that part of the page after each interval of time. I can place the part I would like to refresh in a div, but I am not sure how to refresh only the contents of the div. Any help would be appreciated. Thank you.
我有一个基本的 html 文件，它附加到一个 java 程序。这个java程序在页面刷新时更新部分HTML文件的内容。我只想在每个时间间隔后刷新页面的那部分。我可以将要刷新的部分放在 .a 中div，但我不确定如何仅刷新div. 任何帮助，将不胜感激。谢谢你。
回答by user1721135
Use Ajax for this.
为此使用 Ajax。
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
构建一个函数，它将通过 ajax 获取当前页面，但不是整个页面，只是来自服务器的有问题的 div。然后数据将（再次通过 jQuery）放在同一个有问题的 div 中，并用新内容替换旧内容。
Relevant function:
相关功能：
e.g.
例如
$('#thisdiv').load(document.URL + ' #thisdiv');
Note, load automatically replaces content. Be sure to include a space before the id selector.
请注意，加载会自动替换内容。确保在 id 选择器之前包含一个空格。
回答by Jonast92
Let's assume that you have 2 divs inside of your html file.
假设您的 html 文件中有 2 个 div。
<div id="div1">some text</div>
<div id="div2">some other text</div>
The java program itself can't update the content of the html file because the html is related to the client, meanwhile java is related to the back-end.
java程序本身无法更新html文件的内容，因为html与客户端相关，而java与后端相关。
You can, however, communicate between the server (the back-end) and the client.
但是，您可以在服务器（后端）和客户端之间进行通信。
What we're talking about is AJAX, which you achieve using JavaScript, I recommend using jQuery which is a common JavaScript library.
我们正在谈论的是 AJAX，您可以使用 JavaScript 实现它，我建议使用 jQuery，它是一个常见的 JavaScript 库。
Let's assume you want to refresh the page every constant interval, then you can use the interval function to repeat the same action every x time.
假设您想每隔固定间隔刷新页面，那么您可以使用间隔函数每隔 x 次重复相同的操作。
setInterval(function()
{
alert("hi");
}, 30000);
You could also do it like this:
你也可以这样做：
setTimeout(foo, 30000);
Whereea foo is a function.
其中 foo 是一个函数。
Instead of the alert("hi") you can perform the AJAX request, which sends a request to the server and receives some information (for example the new text) which you can use to load into the div.
您可以执行 AJAX 请求，而不是 alert("hi")，该请求向服务器发送请求并接收一些信息（例如新文本），您可以使用这些信息加载到 div 中。
A classic AJAX looks like this:
一个经典的 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.
}
});
Wherea the backend is able to receive POST'ed data and is able to return a data object of information, for example (and very preferrable) JSON, there are many tutorials out there with how to do so, GSON from Google is something that I used a while back, you could take a look into it.
后端能够接收 POST 的数据并能够返回信息的数据对象，例如（并且非常优选）JSON，有很多教程介绍如何这样做，来自 Google 的 GSON 是我所知道的前阵子用过，你可以看看。
I'm not professional with Java POST receiving and JSON returning of that sort so I'm not going to give you an example with that but I hope this is a decent start.
我对 Java POST 接收和 JSON 返回不专业，所以我不会给你一个例子，但我希望这是一个不错的开始。
回答by jsalonen
You need to do that on the client side for instance with jQuery.
您需要在客户端执行此操作，例如使用 jQuery。
Let's say you want to retrieve HTML into div with ID mydiv:
假设您想将 HTML 检索到带有 ID 的 div 中mydiv：
<h1>My page</h1>
<div id="mydiv">
<h2>This div is updated</h2>
</div>
You can update this part of the page with jQuery as follows:
您可以使用 jQuery 更新页面的这一部分，如下所示：
$.get('/api/mydiv', function(data) {
$('#mydiv').html(data);
});
In the server-side you need to implement handler for requests coming to /api/mydivand return the fragment of HTML that goes inside mydiv.
在服务器端，您需要为传入的请求实现处理程序，/api/mydiv并返回进入 mydiv 的 HTML 片段。
See this Fiddle I made for you for a fun example using jQuery get with JSON response data: http://jsfiddle.net/t35F9/1/
请参阅我为您制作的使用 jQuery get 和 JSON 响应数据的有趣示例：http: //jsfiddle.net/t35F9/1/
回答by Kamil Kie?czewski
Usefetchand innerHTMLto load div content
使用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.style.visibility= "hidden";
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()">Start refreshing (2s)</button>
</div>
<div id="dynamicPart">Dynamic part</div>回答by Mr. Mak
$.ajax(), $.get(), $.post(), $.load()functions of jQuery internally send XML HTTPrequest.
among these the load()is only dedicated for a particular DOM Element. See jQuery Ajax Doc. A details Q.A. on these are Here.
$.ajax(), $.get(), $.post(), $.load()jQuery 内部发送XML HTTP请求的功能。其中，load()仅专用于特定的DOM Element。请参阅jQuery Ajax 文档。有关这些的详细 QA 在这里。
