Javascript 用jquery刷新div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10427573/
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 div with jquery
提问by Walrus the Cat
I'd like to refresh a div. It should have new information from the server on it. All the other answers assume that you've gotten the new data from your $.ajax request and tell you to load that data onto your div, hide it, and show it again, like so:
我想刷新一个 div。它应该有来自服务器的新信息。所有其他答案都假设您已从 $.ajax 请求中获取新数据，并告诉您将该数据加载到 div 中，将其隐藏并再次显示，如下所示：
$("#panel").hide().html(data).fadeIn('fast');
I know, I know, I probably should just get data with Ajax. But right now, I want to just refresh the div, without refreshing the page, and without putting new HTML into the div. Is this possible?
我知道，我知道，我可能应该使用 Ajax 获取数据。但是现在，我只想刷新 div，而不刷新页面，也不要将新的 HTML 放入 div。这可能吗？
回答by Merlyn Morgan-Graham
I want to just refresh the div, without refreshing the page ... Is this possible?
我只想刷新div，而不刷新页面......这可能吗？
Yes, though it isn't going to be obvious that it does anything unless you change the contents of the div.
是的，尽管除非您更改 div 的内容，否则它不会做任何事情很明显。
If you just want the graphical fade-in effect, simply remove the .html(data)call:
如果您只想要图形淡入效果，只需删除.html(data)调用：
$("#panel").hide().fadeIn('fast');
Here is a demo you can mess around with: http://jsfiddle.net/ZPYUS/
这是一个你可以乱搞的演示：http: //jsfiddle.net/ZPYUS/
It changes the contents of the div without making an ajax call to the server, and without refreshing the page. The content is hard coded, though. You can't do anything about that fact without contacting the server somehow: ajax, some sort of sub-page request, or some sort of page refresh.
它改变了 div 的内容，而无需对服务器进行 ajax 调用，也无需刷新页面。但是，内容是硬编码的。如果不以某种方式联系服务器，您就无法对这个事实做任何事情：ajax、某种子页面请求或某种页面刷新。
html:
html：
<div id="panel">test data</div>
<input id="changePanel" value="Change Panel" type="button">?
javascript:
javascript:
$("#changePanel").click(function() {
var data = "foobar";
$("#panel").hide().html(data).fadeIn('fast');
});?
css:
css：
div {
padding: 1em;
background-color: #00c000;
}
input {
padding: .25em 1em;
}?
回答by Ibrahim Khaleel
I tried the first solution and it works but the end user can easily identify that the div's are refreshing as it is fadeIn(), without fade in i tried .toggle().toggle() and it works perfect. you can try like this
我尝试了第一个解决方案并且它有效，但最终用户可以轻松地识别出 div 正在刷新，因为它是淡入（），没有淡入我尝试了 .toggle().toggle() 并且它工作得很好。你可以这样试试
$("#panel").toggle().toggle();it works perfectly for me as i'm developing a messenger and need to minimize and maximize the chat box's and this does it best rather than the above code.
它非常适合我，因为我正在开发一个信使并且需要最小化和最大化聊天框，这比上面的代码做得最好。
