changer l'URL de la page sans rafraîchir la page

Question

Est-ce encore possible?

Voici le problème:

J'ai une recherche par mot clé avec cette URL (après la recherche): http://localhost/thi/search?keyword=key

J'ai une recherche de curseur qui utilise le plugin AjaxForm (jquery) ...

lorsque j'effectue une recherche de curseur, évidemment je serai toujours dans l'URL de recherche par mot clé (parce que la demande est envoyée via ajax)

Y at-il un moyen de changer l'URL actuelle à quelque chose comme http://localhost/thi/search?price=100 (le sli der soumet via GET avec le prix en tant que variable GET)

Je souhaite le faire car je veux que les résultats de recherche du curseur soient mis en signet ... ou existe-t-il une autre façon de faire cela?

Answer 1

Vous pouvez utiliser urls de hachage (recherche de prix # = 100) avec window.location.hash méthodes. Ceux-ci seront mis en signet et l'utilisateur peut naviguer à travers ceux-ci avec les boutons Précédent et Suivant.

Exemple d'utilisation:

<a href="#">100</a> 

$('a').click(function() { 
    window.location.hash = 'price='+$(this).html(); 
    return false; 
}); 

armerai l'URL pour search#price=100 sans rafraîchir.

Answer 2

La meilleure chose que je peux suggérer pour cela serait d'utiliser le hachage dans l'url. Cela permettra aux utilisateurs de mettre en signet l'URL et de garder l'état quand ils reviennent. L'autre avantage est que vous pouvez changer le hachage sans actualiser la page.

Ainsi, votre URL ressemblerait à quelque chose comme ... http://localhost/thi/search?keyword=key#price=100

Le plugin Adresse JQuery fonctionnerait très bien pour cela.

http://www.asual.com/jquery/address/

Answer 3

Avec HTML5, c'est possible. Utilisez window.history.pushState().

Exemple:

if(currentHref!=window.location){ 
    window.history.pushState({path:currentHref},'',currentHref);  
} 

Détails et explications: http://tinywall.info/2012/02/22/change-browser-url-without-page-reload-refresh-with-ajax-request-using-javascript-html5-history-api-php-jquery-like-facebook-github-navigation-menu/