javascript - 用jquery刷新div

Question

我想刷新一个div。它应该有来自服务器的新信息。所有其他答案都假设您已经从 $.ajax 请求中获取了新数据，并告诉您将该数据加载到您的 div 中，隐藏它，然后再次显示它，如下所示：

$("#panel").hide().html(data).fadeIn('fast');

我知道，我知道，我可能应该只使用 Ajax 获取数据。但现在，我只想刷新 div，不刷新页面，也不要将新的 HTML 放入 div。这可能吗？

Answer 1

我只想刷新 div，而不刷新页面……这可能吗？

是的，尽管除非您更改 div 的内容，否则它不会做任何事情是显而易见的。

如果您只想要图形淡入效果，只需删除.html(data)调用：

$("#panel").hide().fadeIn('fast');

这是一个您可以随意使用的演示：http: //jsfiddle.net/ZPYUS/

它更改了 div 的内容，而无需对服务器进行 ajax 调用，也无需刷新页面。不过，内容是硬编码的。如果不以某种方式联系服务器，您就无法对这个事实做任何事情：ajax、某种子页面请求或某种页面刷新。

html:

<div id="panel">test data</div>
<input id="changePanel" value="Change Panel" type="button">​

javascript:

$("#changePanel").click(function() {
    var data = "foobar";
    $("#panel").hide().html(data).fadeIn('fast');
});​

CSS：

div {
    padding: 1em;
    background-color: #00c000;
}

input {
    padding: .25em 1em;
}​

Answer 2

我尝试了第一个解决方案，它可以工作，但是最终用户可以很容易地识别出 div 是fadeIn() 的刷新，没有淡入我尝试了 .toggle().toggle() 并且效果很好。你可以试试这样

$("#panel").toggle().toggle();

它对我来说非常有效，因为我正在开发一个信使并且需要最小化和最大化聊天框，这比上面的代码做得最好。