Frage Ajax + Zurück & Vorwärts Tasten


Ich fange an, neue Anwendung zu schreiben und möchte es voll Ajax Stil machen :)

Ich verwende Jquery, um Ajax-Anfragen zu stellen. Main JS-Datei bekommt eine Variable von gepressten Link und nach diesem Link geht zu einigen PHP-Dateien greift einige Daten zurück und legt alles in vorbereitete HTML-Tags.

So sehe ich diese App.

Jetzt habe ich einige Lösungen gefunden, um Back & Forward-Buttons zum Laufen zu bringen, aber in diesen Lösungen geht das Skript auf vordefinierte Seiten und liest einige Daten nach einer konstanten ID. Also mag ich es nicht.

Was ich will ist ...

  1. Ich benötige einen Code, der verhindert, dass der Browser die Seite neu lädt, wenn der Benutzer die Taste "Zurück" drückt
  2. Erinnere dich an die Browser-Position, also Wenn wir den Status 'C' haben und zurück gedrückt wurde, bringt es JS eine Variable mit dem Wert 'B', dann geht JS zu php und sagt 'B', damit php versteht, welchen Inhalt man vorbereitet. gibt Inhalt zurück an JS, JS aktualisiert die Seite, alle glücklich.

Gibt es eine Lösung, die so funktioniert?


5
2017-09-21 12:31


Ursprung


Antworten:


Ich habe gebraucht jQuery BBQ: Zurück Button & Query-Bibliothek in der Vergangenheit für genau diesen Zweck.

Genauer gesagt, die grundlegende AJAX Beispiel sieht aus, wonach Sie suchen. Der Rest des Beispiele sind auch sehr gut.


3
2017-09-21 12:38



Ich denke, du solltest dir backbone.js ansehen http://documentcloud.github.com/backbone/. Es hat eine Router-basierte Anwendungsstruktur, wobei jede Route tatsächlich eine andere URL ist.

Wenn Sie beispielsweise eine Objektliste haben, können Sie sie in route / # itemsList anzeigen, und jede Elementdetailseite könnte auf / # items / id stehen. Die gesamte Navigation wird für Sie erledigt, Sie müssen nur einige Funktionen aufrufen oder den Code einfügen, der ausgeführt werden soll, wenn Sie zu dieser URL kommen. (Beispiel angepasst 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 -> Hilfecode

www.myapp.com/#item/32 -> Element mit ID 32, das in der Element (ID) -Funktion erfasst wird und eine Anforderung zum Abrufen der Daten über Ajax gemacht wird

www.myapp.com/#itemList -> die Liste aller Elemente, wo Sie Links mit # item / id für jedes Element generieren können.


2
2017-09-21 13:13