如何使用 jQuery Ajax 刷新页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2027931/
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
How to refresh page with jQuery Ajax?
提问by Happy
I want to refresh a full pagewith ajax, after clicking on some initial site link.
单击某些初始站点链接后，我想用 ajax刷新整个页面。
Example:
例子：
We have opened site www.love.com, it has a link to www.love.com/somepage.html
我们打开了网站 www.love.com，它有一个指向 www.love.com/somepage.html 的链接
After we click on this link, full page must be refreshed with ajax (replaced active page by somepage.html)
我们点击这个链接后，必须用ajax刷新整个页面（用somepage.html替换活动页面）
And there is must be some fadeIn/Out effect, when the page is replaced.
并且必须有一些淡入/淡出效果，当页面被替换时。
How to?
如何？
maybe some plugin can do this, any link?
也许某些插件可以做到这一点，任何链接？
回答by azureru
Well a full-page request kind of contradict the purpose of AJAX,
好吧，整页请求有点违背 AJAX 的目的，
but if you insist :) you can use a huge div as a placeholder of your page, and use jQuery Load/Ajax
但如果你坚持:) 你可以使用一个巨大的 div 作为页面的占位符，并使用 jQuery Load/Ajax
the div would look like this
div 看起来像这样
<div id="yourhugediv"></div>
and the function that you can use
以及您可以使用的功能
function changeUrl(href)
{
$('#yourhugediv').load(href);
href = (href == "") ? "/" : href;
uri = window.location.href.split("#/");
window.location.href = uri[0] + "#/" + href;
}
either manually add the function to your link
手动将功能添加到您的链接
<a href="#" onclick="changeUrl('http://love.com/somepage.html')">to load</>
or use jQuery selector to iterate every anchor
或使用 jQuery 选择器来迭代每个锚点
$('a').click(function()
{
changeUrl(a.attr('href'));
});
$('a').attr('href','#');
回答by Alpha Codemonkey
Use FAJAX(Fake AJAX). It will give you that 'coolness' that you are looking for. Using these meta tags in your pages will do a full page refresh with fade-in and fade-out effects.
使用FAJAX（假 AJAX）。它会给你你正在寻找的“酷”。在您的页面中使用这些元标记将使用淡入和淡出效果刷新整个页面。
<META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">
The meta tags only work in IE, but there are ways to get similar results in other browsers using JavaScript.
元标记仅在 IE 中有效，但有一些方法可以在使用 JavaScript 的其他浏览器中获得类似的结果。
<html>
<head>
<title>Page Title</title>
<META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">
<script type="text/javascript">
function fadeInit() {
document.body.style.opacity=0.2; // initialise
}
function fadeIn() {
var bodyStyle=document.body.style;
if ( bodyStyle.opacity < 1) {
bodyStyle.opacity=((bodyStyle.opacity*10)+1)/10; //Add 0.1
setTimeout('fadeIn();',100)
}
}
</script>
</head>
<body onload="fadeInit();fadeIn();">
</body>
</html>
回答by Ray
Sounds like you are trying to use jQuery because someone told you you should be using jQuery - the link tag does this job all by itself without any script required
听起来您正在尝试使用 jQuery，因为有人告诉您应该使用 jQuery - 链接标签自行完成这项工作，无需任何脚本
ok - we have to do what our girlfriends tell us to do...
好的 - 我们必须做我们的女朋友告诉我们做的事情......
I suppose you could do something like this:
我想你可以做这样的事情：
$("body").load("next_page.html");
$("body").load("next_page.html");
or
或者
$("html").load("next_page.html");(would this even work??)
$("html").load("next_page.html");（这甚至可以工作吗？？）
回答by Jeremy Bandini
Since the other page is in the same domain you could scrape the other page to retrieve the data you're interested in. You could even replace the entire body tag of the current page with the contents of the body tag in the other page.
由于另一个页面在同一个域中，您可以抓取另一个页面来检索您感兴趣的数据。您甚至可以用另一个页面中的 body 标记的内容替换当前页面的整个 body 标记。
The process would go something like: User takes some action on current page to trigger desired action, JavaScript makes AJAX request to fetch somepage.html and stores the result in a string, JavaScript does equivalent of innerHTML (or jQuery.html()) to replace the contents of the current page (or div or whatever) with whatever was retrieved from somepage.html and add special effect.
该过程将类似于：用户在当前页面上执行一些操作以触发所需的操作，JavaScript 发出 AJAX 请求以获取 somepage.html 并将结果存储在一个字符串中，JavaScript 执行等效于 innerHTML（或 jQuery.html()）以用从 somepage.html 检索到的任何内容替换当前页面（或 div 或其他内容）的内容并添加特殊效果。
In theory this would allow you to completely replace the contents of the current page with whatever was fethced from somepage.html.
理论上，这将允许您用从 somepage.html 提取的任何内容完全替换当前页面的内容。
回答by Jan Han?i?
Just make a link that points there:
只需创建一个指向那里的链接：
<a href="http://www.love.com/somepage.html">link text</a>
ps: I'm a little bit confused though ... you already have a link to that page that causes a new request (full page refresh), why the need for AJAX I wonder ...
ps：虽然我有点困惑......你已经有一个链接到那个页面，导致一个新的请求（整页刷新），为什么需要AJAX我想知道......
回答by Cuga
I know this is an old post, but I think what you're looking for is solved by using the BBQ jQuery plugin: http://benalman.com/projects/jquery-bbq-plugin/
我知道这是一篇旧帖子，但我认为您正在寻找的是通过使用 BBQ jQuery 插件解决的：http: //benalman.com/projects/jquery-bbq-plugin/
