2010-01-08 4 views
1

Je veux actualiser une page complète avec ajax, après avoir cliqué sur un lien de site initial.Comment rafraîchir la page avec jQuery Ajax?

Exemple:

Nous avons ouvert le site www.love.com, il a un lien vers www.love.com/somepage.html

Après cliquer sur ce lien, la page complète doit être rafraîchi avec ajax (page active remplacée par somepage.html)

Et il doit y avoir un effet de fondu enchaîné, quand la page est remplacée.

Comment?


peut-être un plugin peut le faire, un lien?

+0

rafraîchir la page complète et Ajax sont contradictoires les uns aux autres – kgiannakakis

+0

peut-être, mais je veux que la page soit rafraîchie par ajax – Happy

+2

Pourquoi voudriez-vous cela? Vous pouvez donc avoir un GIF animé pendant le chargement ou quoi? AJAX n'est pas fait pour ça. Si vous voulez aller à une URL complètement différente, laissez AJAX seul. Si vous souhaitez rafraîchir juste une partie d'une page, alors c'est autre chose. –

Répondre

4

bien une demande pleine page contradiction type de l'objet d'AJAX,

mais si vous insistez :) vous pouvez utiliser un énorme div comme un espace réservé de votre page, et utilisez jQuery Charger/Ajax

la div se présente comme suit

<div id="yourhugediv"></div> 

et la fonction que vous pouvez utiliser

function changeUrl(href) 
{ 
    $('#yourhugediv').load(href); 
    href = (href == "") ? "/" : href; 
    uri = window.location.href.split("#/"); 
    window.location.href = uri[0] + "#/" + href; 
} 

soit ajouter manuellement la fonction à votre lien

<a href="#" onclick="changeUrl('http://love.com/somepage.html')">to load</> 

ou utilisez le sélecteur jQuery pour itérer chaque ancre

$('a').click(function() 
{ 
    changeUrl(a.attr('href')); 
}); 
$('a').attr('href','#'); 
+6

euh si ce sont des pages html complètes (c.-à-d. S'il y a ) alors cela deviendrait vraiment moche. –

1

Il suffit de faire un lien qui pointe là:

<a href="http://www.love.com/somepage.html">link text</a> 

ps: Je suis un peu confus mais ... vous avez déjà un lien vers cette page qui provoque une nouvelle demande (de rafraîchissement pleine page) , pourquoi la nécessité d'AJAX Je me demande ...

+1

c'est plus cool, d'avoir une pleine page d'actualisation avec ajax. Comment faire, pouvez-vous aider? – Happy

+1

@Glister: Si vous faites des choses parce qu'elles sont cool, vous allez probablement rendre la vie de votre utilisateur difficile. Vous devriez faire les choses parce qu'elles sont raisonnables et améliorer l'expérience utilisateur/l'utilisabilité et non parce qu'elles sont fantaisistes (souvenez-vous de l'étiquette 'blink' ici vous allez ...) –

+1

@Fixix, si je n'ai pas besoin de cela, je ne voudrais pas demander – Happy

2

on dirait que vous essayez d'utiliser jQuery parce que quelqu'un vous a dit que vous devriez utiliser jQuery - la balise link fait ce travail tout seul sans aucun script requis

ok - nous devons faire ce que nos copines nous disent de faire ...

Je suppose que vous pourriez faire quelque chose comme ceci:

$("body").load("next_page.html");

ou

$("html").load("next_page.html"); (cela fonctionnerait même ??)

+0

ma petite amie veut ce tour, ne sais pas comment mettre en œuvre. De l'aide? :) – Happy

1

Depuis l'autre page est dans le même domaine Il est possible que l'autre page soit récupérée pour récupérer les données qui vous intéressent. Vous pouvez même remplacer l'étiquette de corps entière de la page en cours par le contenu de l'étiquette de corps de l'autre page. Le processus serait quelque chose comme: L'utilisateur prend une action sur la page en cours pour déclencher l'action désirée, JavaScript demande à AJAX d'aller chercher un page.html et stocke le résultat dans une chaîne, JavaScript est équivalent à innerHTML (ou jQuery.html()) pour remplacer le contenu de la page actuelle (ou div ou autre) avec tout ce qui a été récupéré à partir de somepage.html et ajouter un effet spécial.

En théorie, cela vous permettrait de remplacer complètement le contenu de la page en cours avec ce qui a été trouvé dans pagepage.html.

2

Utilisez FAJAX (AJAX Faux). Cela vous donnera cette «fraîcheur» que vous recherchez. L'utilisation de ces métabalises dans vos pages permet d'effectuer une actualisation complète de la page avec des effets de fondu entrant et sortant. Les balises META fonctionnent uniquement dans IE, mais il existe des moyens d'obtenir des résultats similaires dans d'autres navigateurs utilisant 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

Vous voulez en savoir plus? Compatibilités du navigateur? Je n'ai pas vu cette notation avant –

+0

merci, mais c'est un exemple moche – Happy