Ajax + nút quay lại và tiến lên

Question

Tôi bắt đầu viết ứng dụng mới và muốn tạo phong cách đầy đủ ajax :)

Tôi đang sử dụng Jquery để thực hiện yêu cầu ajax. Tệp JS chính nhận được một số biến từ liên kết được nhấn và theo liên kết đó đi đến một số tệp php lấy một số dữ liệu quay lại và đặt mọi thứ vào thẻ html chuẩn bị sẵn.

Đây là cách tôi thấy ứng dụng này.

Bây giờ tôi đã tìm thấy một số giải pháp để quay lại các nút chuyển tiếp bắt đầu hoạt động nhưng trong các giải pháp đó, tập lệnh của chúng đi tới các trang được xác định trước và đọc một số dữ liệu theo một số ID không đổi.

Những gì tôi muốn là ...

1. Tôi cần một số mã mà sẽ ngăn trình duyệt từ trang tải lại nếu người dùng đang gây sức ép trở lại, nút phía trước
2. Ghi vị trí trình duyệt, vì vậy Nếu chúng ta vào trạng thái ' C 'và ngược lại đã được nhấn nó mang đến cho JS một số biến với giá trị' B ', sau đó JS đi đến php và nói' B 'để php sẽ hiểu được nội dung để chuẩn bị. cung cấp nội dung cho JS, JS cập nhật trang, mọi người đều hạnh phúc.

Có giải pháp nào hoạt động theo cách này không?

Answer 1

Tôi đã sử dụng jQuery BBQ: Back Button & Query Library trong quá khứ chỉ cho mục đích này.

Cụ thể, ví dụ basic AJAX có vẻ là những gì bạn đang theo dõi. Phần còn lại của examples cũng xuất sắc nhất.

Answer 2

Tôi nghĩ bạn nên xem qua backbone.js http://documentcloud.github.com/backbone/. Nó có cấu trúc ứng dụng dựa trên bộ định tuyến, trong đó mỗi tuyến đường thực sự là một url khác/# 'ed.

Như thế này khi bạn có danh sách mục, bạn có thể hiển thị nó trong route/# itemsList và mỗi trang chi tiết mục có thể nằm trên/# items/id. Toàn bộ điều hướng được xử lý cho bạn, tất cả những gì bạn phải làm là gọi một số chức năng hoặc dán mã mà bạn muốn chạy khi bạn truy cập url đó. (Ví dụ chuyển thể 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 -> giúp đỡ đang

www.myapp.com/#item/32 -> mục với ID 32, mà được thể hiện trong các chức năng mục (id) và yêu cầu được thực hiện để tìm nạp dữ liệu qua Ajax

www.myapp.com/#itemList -> danh sách tất cả các mục, nơi bạn có thể tạo liên kết với # item/id cho mỗi mục.