php 重新加载 DIV 而不重新加载整个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18799579/
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
Reload a DIV without reloading the whole page
提问by Fate Averie
I have a Div Tag that has a php include to fill that div with information what I want to do is make it so that the page is called every 15s so it can update the information there without having to reload the whole webpage. I've tried to do this with JavaScript/jQuery and I just can't seem to get it to work
我有一个 Div 标签，它有一个 php 包含来填充该 div 的信息，我想做的是使该页面每 15 秒调用一次，这样它就可以在那里更新信息，而不必重新加载整个网页。我试图用 JavaScript/jQuery 来做到这一点，但我似乎无法让它工作
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
</script>
<div class="View"><?php include 'Small.php'; ?></div>
this is what I have after searching some, and what happens is, it loads the Small.php but it doesn't refresh it or update the info every 15 seconds.
这是我在搜索一些之后所拥有的，结果是，它加载了 Small.php，但它不会每 15 秒刷新一次或更新一次信息。
please help!
请帮忙！
I should add all my php arrays that should show up are all executed in the Small.php and the page I'm including it into is just so it's isolated.
我应该添加我所有应该显示的 php 数组都在 Small.php 中执行，我将它包含到的页面就是这样它是孤立的。
EDIT: What No One noticed was that my first script referencing jQuery did not have a closing tag, and that was breaking my second script. after adding in a proper closing tag, the script was finally working, but the fadeIn does not show properly without first using a fadeOut.
编辑：没有人注意到我的第一个引用 jQuery 的脚本没有结束标记，这破坏了我的第二个脚本。添加适当的结束标记后，脚本终于可以工作了，但是如果不先使用淡出淡出，淡入淡出就无法正确显示。
回答by kelunik
Your code works, but the fadeIndoesn't, because it's already visible. I think the effect you want to achieve is: fadeOut→ load→ fadeIn:
您的代码有效，但fadeIn无效，因为它已经可见。我想你想达到的效果是：fadeOut→交通load→交通fadeIn：
var auto_refresh = setInterval(function () {
$('.View').fadeOut('slow', function() {
$(this).load('/echo/json/', function() {
$(this).fadeIn('slow');
});
});
}, 15000); // refresh every 15000 milliseconds
Try it here: http://jsfiddle.net/kelunik/3qfNn/1/
在这里试试：http: //jsfiddle.net/kelunik/3qfNn/1/
Additional notice: As Khanh TO mentioned, you may need to get rid of the browser's internal cache. You can do so using $.ajaxand $.ajaxSetup ({ cache: false });or the random-hack, he mentioned.
附加说明：正如Khanh TO 提到的，您可能需要摆脱浏览器的内部缓存。他说，你可以使用$.ajaxand$.ajaxSetup ({ cache: false });或 random-hack来做到这一点。
回答by Shadow
try this
尝试这个
<script type="text/javascript">
window.onload = function(){
var auto_refresh = setInterval(
function ()
{
$('.View').html('');
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
}
</script>
回答by Khanh TO
Your html is not updated every 15 seconds. The cause could be browser caching. Add Math.random()to avoid browser caching, and it's better to wait until the DOM is fully loaded as pointed out by @shadow. But I think the main cause is the caching
您的 html 不会每 15 秒更新一次。原因可能是浏览器缓存。添加Math.random()以避免浏览器缓存，最好等到 DOM 完全加载，如@shadow 所指出的那样。但我认为主要原因是缓存
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function(){
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php?' + Math.random()).fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
});
</script>
回答by Brad Andrews
The code you're using is also going to include a fadeout effect. Is this what you want to achieve? If not, it might make more sense to just add the following INSIDE "Small.php".
您使用的代码还将包含淡出效果。这是您想要达到的目标吗？如果没有，添加以下INSIDE“Small.php”可能更有意义。
<meta http-equiv="refresh" content="15" >
This adds a refresh every 15seconds to the small.php page which should mean if called by PHP into another page, only that "frame" will reload.
这会每 15 秒向 small.php 页面添加一次刷新，这意味着如果被 PHP 调用到另一个页面中，只有该“框架”会重新加载。
Let us know if it worked/solved your problem!?
让我们知道它是否有效/解决了您的问题！？
-Brad
-布拉德
回答by Brad Andrews
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<div class="View"><?php include 'Small.php'; ?></div>
<script type="text/javascript">
$(document).ready(function() {
$('.View').load('Small.php');
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
$.ajaxSetup({ cache: true });
});
</script>
