Ajax + przyciski Wstecz i Przód

Question

Zaczynam pisać nową aplikację i chcę, aby był pełny styl ajaxowy :)

Używam Jquery do tworzenia zapytań ajaxowych. Główny plik JS pobiera pewną zmienną z wciśniętego linku i zgodnie z tym linkiem przechodzi do niektórych chwytów plików php, niektóre dane wracają i umieszczają wszystko w przygotowanych znacznikach html.

W ten sposób widzę tę aplikację.

Teraz znalazłem kilka sposobów na odzyskanie przycisków, jednak w ich rozwiązaniach ich skrypt przechodzi do wcześniej zdefiniowanych stron i odczytuje niektóre dane według stałego identyfikatora. Nie podoba mi się to.

Co chcę jest ...

1. Potrzebuję kod, który spowoduje, że przeglądarka od strony przeładunkowych jeśli użytkownik naciska przycisk wstecz, naprzód
2. Zapamiętaj pozycję przeglądarki, więc jeśli jesteśmy na stanie " C 'i powrót został wciśnięty przynosi JS niektóre zmiennej o wartości "B", a następnie JS idzie do php i mówi "B" więc php zrozumie, które treści do przygotowania. przekazuje treści do JS, JS aktualizuje stronę, wszyscy są zadowoleni.

Czy istnieje rozwiązanie, które zadziała w ten sposób?

Answer 1

Używałem już w tym celu jQuery BBQ: Back Button & Query Library.

W szczególności przykład basic AJAX jest tym, na co masz ochotę. Reszta modelu examples również jest najlepsza.

Answer 2

Myślę, że powinieneś rzucić okiem na backbone.js http://documentcloud.github.com/backbone/. Ma strukturę aplikacji opartą na routerze, gdzie każda trasa jest w rzeczywistości innym/# 'ed url.

Podobnie, jeśli masz listę przedmiotów, możesz wyświetlić ją w route/# itemsList, a każda strona ze szczegółami może być na/# items/id. Cała nawigacja jest dla ciebie obsługiwana, wszystko, co musisz zrobić, to wywołać niektóre funkcje lub wkleić kod, który chcesz uruchomić, gdy dojdziesz do tego adresu URL. (Przykład dostosowany http://documentcloud.github.com/backbone/#Router)

var Workspace = Backbone.Router.extend({ 

    routes: { 
    "help":     "help", // #help 
    "item/:id":  "item", // #item/myItemId 
    "itemList": "list" // #itemList 
    }, 

    help: function() { 
    ... show help 
    }, 

    item: function(id) { 
    ... show single item with jQuery, Ajax, jQuery UI etc 
    }, 

    itemList: function(){ 
    ... show item list with jQuery, jQuery UI etc. 
    } 

}); 

www.myapp.com/#help -> kod pomocy

www.myapp.com/#item/32 -> element z identyfikatorem 32, które jest uchwycone w funkcja item (id) i wysyłane jest żądanie pobrania danych za pośrednictwem Ajaxa, co pozwala na wygenerowanie linków z # item/id dla każdej pozycji.