How to refresh page with jQuery Ajax?

2019-03-22 14:48发布

站内问答 / jQuery
1047 6 4

I want to refresh a full page with ajax, after clicking on some initial site link.

Example:

We have opened site www.love.com, it has a link to www.love.com/somepage.html

After we click on this link, full page must be refreshed with ajax (replaced active page by 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?

6条回答
等我变得足够好
2楼-- · 2019-03-22 15:08

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/

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
3楼-- · 2019-03-22 15:11

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

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");

or

$("html").load("next_page.html"); (would this even work??)

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
4楼-- · 2019-03-22 15:14

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.

<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.

<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>
查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
5楼-- · 2019-03-22 15:23

Well a full-page request kind of contradict the purpose of AJAX,

but if you insist :) you can use a huge div as a placeholder of your page, and use jQuery Load/Ajax

the div would look like this

<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

$('a').click(function()
{
    changeUrl(a.attr('href'));
});
$('a').attr('href','#');
查看更多
0人赞 添加讨论(0) 举报
乱世女痞
6楼-- · 2019-03-22 15:28

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.

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.

In theory this would allow you to completely replace the contents of the current page with whatever was fethced from somepage.html.

查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
7楼-- · 2019-03-22 15:35

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 ...

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)