Mettre à jour l'URL sur AJAX appel?
Actuellement, le plus gros problème que je rencontre avec AJAX est le fait que si j'utilise AJAX sur une page, accédez à une autre page, puis utilisez le bouton Précédent du navigateur pour revenir en arrière. tout ce qui a été changé avec AJAX est parti.
J'ai pensé à utiliser le plug-in jQuery Addresss pour résoudre ce problème, mais je n'aime pas que cela modifie uniquement l'URL avec "# any.html" au lieu de le modifier complètement.
Idéalement, j'aimerais que l'URL passe de: "www.example.com/p:2/" à "www.example.com/p:3/" lorsque je crée le AJAXapproprié. _ appel.
Est-ce possible?
Non, ce n'est pas possible. Mise à jour: Il est maintenant possible via l'API de l'historique HTML5 - voir la réponse de razbakov .
J'espère que vous réalisez que vous essayez de résoudre un problème extrêmement difficile.
Disons que votre URL ressemble à
http://example.com/mypage/
Si vous modifiez l’emplacement de la fenêtre par programme en
http://example/mypage/1/
Le navigateur prendra le relais et essaiera de naviguer vers cette page, voilà votre code ajax fantaisie!
Alors, quelle est l'alternative? Vous utilisez un fragment d'URL.
Disons que vous avez une URL comme celle-ci,
http://example.com/anotherpage/#section
Le navigateur va d'abord charger http://example.com/anotherpage/ et essayer de trouver une ancre nommée 'section' et faire défiler jusqu'à cet endroit. Ce comportement est exploité par le plugin 'Adresses'. Ceci est similaire au fonctionnement de ces liens "Scroll To Top".
Donc si vous êtes sur la page
http://example.com/mypage/
et changez l'URL en
http://example.com/mypage/#1
Le navigateur ne chargera pas de nouvelle page mais tentera plutôt de trouver une ancre nommée '1' et de faire défiler jusqu'à cette ancre.
Même si vous avez réussi à ajouter des fragments à l'URL, cela ne signifie pas que le travail est terminé. Si l'utilisateur appuie sur le bouton Précédent, le DOM sera réinitialisé et vous devrez analyser ces fragments et recréer le DOM. C'est vraiment non trivial.
C'est possible avec HTML5. Vous pouvez tester par exemple le site GitHub ou Vkontakte.
La meilleure réponse est ici: Modifier l'URL dans le navigateur sans charger la nouvelle page à l'aide de JavaScript
Il dit que vous pouvez utiliser la fonction history.pushState à ces fins. Mais cette solution ne fonctionnera que dans les navigateurs compatibles HTML5. Sinon, vous devez utiliser la méthode de hachage.
Ce problème peut être résolu en utilisant history.js. https://github.com/browserstate/history.js
pjax gère cela gracieusement dans un navigateur moderne.
Après avoir passé l'appel AJAX, nous pouvons mettre à jour l'URL du client à l'aide de history.pushState. Veuillez trouver la syntaxe et l'exemple ci-dessous
Syntaxe: history.pushState (obj, obj.Title, obj.Url);
Exemple:
var url = "http://example.com/mypage/" + "newParameter=newValue"
history.pushState(undefined, '', url);