如何学习在jQuery AJAX应用程序中启用后退按钮? [英] How can I learn about enabling the back button in a jQuery AJAX application?

问题描述

我已经查看了这里所有最受欢迎的问题，包括那些引用了诸如BBQ和jQuery Address之类的最受欢迎插件的问题.

I have looked at all of the most popular questions on here, including the ones that reference the most popular plugins like BBQ and jQuery Address.

但是，我缺少一些东西.我需要从那些项目中看到的任何内容中退一步.他们假定了我显然没有的一些基本知识，并且我无法推断出示例中的每一行代码实际上在做什么.

However, there is something I am missing. I need instruction a step back from anything I have seen in those projects. They assume some basic knowledge that I apparently don't have, and I am unable to deduce what each line of code in the examples is actually doing.

我想做四件事:

1)使前进按钮的工作方式与非AJAX应用程序相同.
2)使后退按钮像在非AJAX应用程序中一样工作.
3)将网址反映在地址栏中，以便可以将其添加为书签.
4)生成深层链接，以便可以对AJAX内容进行爬网.

1) Make the forward button work like it does in a non-AJAX app.
2) Make the backward button work like it does in a non-AJAX app.
3) Reflect the url in the address bar so that it can be bookmarked.
4) Generate deep links so that the AJAX stuff can be crawled.

仅此而已.其他任何东西都不过分.这是一个Rails 3.0.4应用程序，并且我所有的链接的href均为#".单击其中一个链接可激活application.js的功能，该功能将通过从.js.erb文件呈现的部分创建的更多链接替换当前页面上div中的html.

And that is all. Anything else is overkill. This is a Rails 3.0.4 application, and I have links that all have an href of "#". Clicking on one of the links activates a function from application.js that replaces the html in a div on the current page with more links created from a partial that is rendered from a .js.erb file.

我有一条面包屑路径，效果很好，但是使用后退按钮会将您带到您正在查看的任何网站，然后再查看该应用程序.

I have a breadcrumb trail that works just fine, but using the back button will take you to whatever website you were looking at before you looked at the application.

所以我的一些问题是:

1)我的每个链接都需要唯一的href值而不是简单的#"吗?
2)我应该每次替换该div，还是只是将其隐藏并创建一个新的div.如果是这样，每个新的div是否应有一个新的id?
3)由于当前地址栏中的URL不会更改，并且这些AJAX请求都是POSTS，我是否必须在Rails中做任何事情以使其响应这些新URL之一?通过浏览器历史记录或返回按钮?

1) Do each of my links need a unique href value instead of a simple "#"?
2) Should I be replacing that div each time, or simply hiding it and creating a new one. If so, should each new div have a new id?
3) Since currently the url in the address bar doesn't change, and these AJAX requests are all POSTS, do I have to do anything in Rails to make it respond to one of these new URLs which will invariably trigger a GET request when accessed via browser history or back button?

这些是使我无法处理现有问题的障碍.非常感谢您提供的任何帮助！

These are the barriers that are keeping me from running with the existing questions out there. Thanks a lot for any help you can offer!

我的应用程序不是基于选项卡的.页面加载时，并非所有锚都可用.用户单击链接时会发生以下情况:

My application is not tab based. Not all the anchors are available when the page loads. Here is what happens when a user clicks a link:

1)隐藏的字段用单击的链接的文本值填充.

1) A field in a hidden form is filled in with the text value of the link that was clicked.

2)隐藏的表格已序列化，并通过POST传递给控制器​​操作.

2) The hidden form is serialized and delivered to a controller action with POST.

3)控制器操作确定谁发出了请求，确定他们有权访问哪些数据，并使用表单值(现在为params)检索对象列表.

3) The controller action determines who made the request, figures out what data they have access to, and uses the form values (now params) to retrieve a list of objects.

4)这些对象被传递到.js.erb视图模板，该模板进而使用传递的值来呈现部分内容.

4) Those objects are passed to a .js.erb view template that in turn render a partial with the values that were passed.

5)新链接通过.js.erb模板中的js反弹.

5) The new links are rebound via js in the .js.erb template.

基本上，由于我的数据不是静态的，因此我需要弄清楚如何重新生成状态为原样"的POST请求，以便真正返回".还是可以将表单状态和屏幕以某种方式缓存?

Basically, since my data is not static, I need to figure out how to re-generate that POST request with the forms state AS IT WAS in order to really "go back". Or can the form state, and the screen be cached somehow?

推荐答案

1)我的每个链接都需要唯一的href值而不是简单的#"吗?

1) Do each of my links need a unique href value instead of a simple "#"?

是的，浏览器仅检测到URL中的更改.如果当前网址是foo.com/#，并且用户单击将他带到foo.com/#的链接，那么历史应该如何得知他去了哪里?

Yes, the browser only detects changes in the URL. if the current url is foo.com/#, and the user clicks a link that takes him to foo.com/#, well, how is the history supposed to know he went anywhere?

因此，您在#后面放置了唯一的文本. foo.com/#home和foo.com/#about将生成唯一的历史记录条目.然后，当用户将其中一个添加为书签时，您可以解析URL的后半部分以找出他在哪里.

So, you put unique text after the #. foo.com/#home and foo.com/#about will generate unique history entries. Then when a user bookmarks one of those, you can parse the latter part of the URL to find out where he was.

2)隐藏和交换div，还是替换?

2) Hide and swap divs, or replace?

如果您不必每次都获取每个div的内容，则可以节省流量开销.如果内容足够小，请将其全部放在页面中，然后隐藏/显示div.如果内容很大，请仅在他们第一次单击时获取它.即我在A上并单击B，您应该隐藏A并发出ajax请求以获取B的内容，然后显示B.然后，如果我单击回到A，您将显示已经存在的A并隐藏B.发出另一个服务器请求以获取A.

You'll save on traffic overhead if you're not fetching the contents of each div each time. If the content is small enough, put it all in the page and just hide/show the divs. If the content is large, only fetch it the first time they click on it. i.e. I'm on A and click on B, you should hide A and make an ajax request to get B's content, then show B. Then if I click back to A, you show the A that's already there and hide B. No need to make another server request to get A when you already have it.

3)由于当前地址栏中的URL不变，并且这些AJAX请求都是POSTS，我是否必须在Rails中执行任何操作以使其响应这些新URL之一，而这将始终触发GET通过浏览器历史记录或后退"按钮访问时是否请求?

3) Since currently the url in the address bar doesn't change, and these AJAX requests are all POSTS, do I have to do anything in Rails to make it respond to one of these new URLs which will invariably trigger a GET request when accessed via browser history or back button?

每次使用后退按钮时，新的URL都不会触发GET请求. #样式的方便之处在于，#之后的任何内容都不会发送到服务器.即，如果您转到foo.com/bar.html#home，则客户端会向foo.com/bar.html发出GET请求.然后，如果用户转换为foo.com/bar.html#about，则浏览器不会自行发出另一个请求.

The new URLs won't trigger a GET request on each use of the back button. The handiness of the # style is that anything after the # doesn't get sent to the sever. i.e. if you go to foo.com/bar.html#home, the client makes a GET request to foo.com/bar.html. Then if the user transitions to foo.com/bar.html#about, the browser doesn't make another request on its own. the # was originally there to denote links to content within the same page (i.e. a large document, where you might want to have an index that links to the top of each chapter).

这篇关于如何学习在jQuery AJAX应用程序中启用后退按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！