As we all know one of the great benefits of implementing AJAX is the possibility of updating content without having to navigate to a new Web page. With this comes the drawback that the user can not come back to the last action, and doesn’t have a navigation link for his AJAX generated page.
The solution: using window.location.hash to keep information regarding AJAX action.
For example let’s say an AJAX request is done when a button is pressed in the page, and when that button is pressed the AJAX request load’s data for that buttons id, we will add required data to the window.location.hash, like this:
-
$('#book1').click(function(){
-
//add to hash data that you need to make the AJAX request later
-
$(window).location.hash=$(this).attr('id');
-
$.ajax({
-
type:"POST",
-
url:current_url,
-
dataType:"html",
-
data:'selection_id='+$(this).attr('id'),
-
success:function(html){
-
//do something
-
}})})
Now on page load we need to grab the hash (if it exists and make the appropriate request), like this:
-
$(document).ready(function(){
-
if($(window).location.hash.length))
-
{
-
//we will use $(window).location.hash.replace('#','') in the "data" section of the AJAX request
-
$.ajax({
-
type:"POST",
-
url:current_url,
-
dataType:"html",
-
data:'selection_id='+$(window).location.hash.replace('#',''),
-
success:function(html){
-
//do something
-
}})
-
}
-
});
And now you can navigate to your AJAX request.
Also I suggest using a special character at the beginning of the hash (like ‘!’), because when location.hash is changed the browser tries to move (lower) the position of the document to any DOM element with the id defined in the hash, so if hash is #book1, the browser will move (lower) the page to the DOM element, so if you use ‘!’ and have #!book1 the !book1 id doesn’t exist and you can avoid any problems.
Another idea is to integrate ‘Back’ actions for navigation, so when a user presses the ‘Back’ button of the browser, you will show the requested AJAX content. There are a couple of jQuery plugins out there had handle the hashchange event, and that you can use.
相关推荐
Navigation2D 2D寻路 在官方寻路的基础上改进的 操作跟原来的差不多
A Web Site Navigation Engine.pdfA Web Site Navigation Engine.pdf
This book has four main aims: • To provide an introduction to navigation systems suitable for those with no prior knowledge;...• To provide a detailed treatment of integrated navigation.
HUD Navigation System.rar
poj 1984 Navigation Nightmare.md
Ajax-magento2-ajax-layered-navigation.zip,ajax分层导航magento 2提供了一个过滤器列表,帮助您的客户以最短的方式搜索和获得他们最喜欢的产品。这个扩展应用了现代ajax技术来增强过滤系统,以提高用户对页面上每...
NaveGo a simulation framework for low-cost integrated navigation systems.原版英文文档
ROS 与 navigation 教程-目录 ROS 与 navigation 教程-设置机器人使用 TF ROS 与 navigation 教程-基本导航调试指南 ROS 与 navigation 教程-安装和配置导航包 ROS 与 navigation 教程-结合 RVIZ 与...
RN项目源代码: 文章地址: https://blog.csdn.net/lxyoucan/article/details/108427400 React Navigation 5.x安装 react-native-vector-icons安装与配置 React Navigation传参和跳转 夜间模式的支持演示
ERP系统信息化资料:SAP专业文档资料Basic Navigation training.ppt
Unity AI Navigation插件的快速使用方法
Global.Positioning.Systems.Inertial.Navigation.and.Integration 国外经典著作
参照http://www.cocoachina.com/design/20160129/15175.html中UI Navigation Concept by Ludmila Shevchenko 写的一个动画
材料设计底层导航实现
Principles of GNSS, Inertial, and Multi-Sensor Integrated Navigation Systems Principles of GNSS, Inertial, and Multi-Sensor Integrated Navigation Systems
content//codelabs.developers.google.com/codelabs/android-navigation/
用MATLAB编写求解伪距定位方程的程序,对实际数据进行处理,解算出接收机的位置及钟差信息。提供8个通道的两组数据如下,X, Y, Z 为WGS-84坐标系下各通道所跟踪卫星的坐标,Range为与之对应的校正后的伪距测量值。...
android NavigationView demo
Android Developers, Training部分, Best Practices for Interaction and Engagement -> Creating a Navigation Drawer 章节 demo
iOS Navigation Menu ,Navigation Menu 是一个 Objective-C 组件,可在导航条上显示一个下拉菜单。