ajax页面中的前进与后台的实现
具体效果参考:http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html? //以下是自己的部分理解
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="description" content="HTML5 history API与ajax分页 » 张鑫旭-鑫空间-鑫生活"/>
<meta name="description" content="张鑫旭web前端学习实例页面 HTML5 history API与ajax分页"/>
<meta name="keywords" content="ajax, 分页, html5, history, API"/>
<meta name="author" content="张鑫旭, zhangxixnu"/>
<title>HTML5 history API与ajax分页 » 张鑫旭-鑫空间-鑫生活</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
<link rel="stylesheet" href="../css/hl.css" type="text/css"/>
<link rel="stylesheet" href="../css/zxx.lib.css" type="text/css"/>
</head> <body>
<div id="main">
<h1>HTML5 history API与ajax分页实例页面</h1> <div id="body" class="light">
<div id="content" class="show">
<h3>展示</h3> <div class="article_new"><a href="http://www.zhangxinxu.com/wordpress/?p=3432">回到相关文章 »</a></div>
<div class="demo">
<h4 class="tc f14">上海3月开盘项目汇总</h4> <div class="mt10 cho_box z">
<b class="cho_line"></b> <div class="fix">
<!-- 左边的选菜项 -->
<div class="cho_left">
<div class="equal_height cho_equal_height"></div>
<ul id="choMenu" class="rel cho_menu">
<li><a href="ajax.php?area=pudong" class="cho_link">浦东区<span class="ml20">8</span></a>
</li>
<li><a href="ajax.php?area=baoshan" class="cho_link">宝山区<span class="ml20">7</span></a>
</li>
<li><a href="ajax.php?area=jiading" class="cho_link">嘉定区<span class="ml20">8</span></a>
</li>
<li><a href="ajax.php?area=qingpu" class="cho_link">青浦区<span class="ml20">3</span></a>
</li>
<li><a href="ajax.php?area=minhang" class="cho_link">闵行区<span class="ml20">4</span></a>
</li>
<li><a href="ajax.php?area=putuo" class="cho_link">普陀区<span class="ml20">2</span></a>
</li>
<li><a href="ajax.php?area=jinshan" class="cho_link">金山区<span class="ml20">3</span></a>
</li>
<li><a href="ajax.php?area=songjiang" class="cho_link">松江区<span
class="ml20">3</span></a></li>
<li><a href="ajax.php?area=zhabei" class="cho_link">闸北区<span class="ml20">1</span></a>
</li>
<li><a href="ajax.php?area=fengxian" class="cho_link">奉贤区<span class="ml20">5</span></a>
</li>
<li><a href="ajax.php?area=huangpu" class="cho_link">黄浦区<span class="ml20">1</span></a>
</li>
<li><a href="ajax.php?area=changning" class="cho_link">长宁区<span
class="ml20">1</span></a></li>
<li><a href="ajax.php?area=jingan" class="cho_link">静安区<span class="ml20">1</span></a>
</li>
<li><a href="ajax.php?area=zhoubian" class="cho_link">上海周边<span
class="ml20">1</span></a></li>
</ul>
</div> <!-- 右侧主列表 -->
<div class="cell">
<ul class="fix cho_list_title">
<li class="l pct20">楼盘名</li>
<li class="l pct30">价格</li>
<li class="cell">项目地址</li>
</ul>
<div id="listBox">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var eleMenuOn = null,
eleListBox = $("#listBox"),
tempList = $("#tempChoList").html(),
clMenuOn = "cho_link_on"; String.prototype.temp = function (obj) {
return this.replace(/\$\w+\$/gi, function (matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined" ? "" : returns;
});
}; var eleMenus = $("#choMenu a").bind("click", function (event) {
// alert(2);
var query = this.href.split("?")[1];
if (history.pushState && query && !$(this).hasClass(clMenuOn)) {
eleMenuOn && eleMenuOn.removeClass("cho_link_on");
eleMenuOn = $(this).addClass("cho_link_on");
eleListBox.html('<div class="cho_loading"></div>');
$.ajax({
url: this.href,
dataType: "json",
success: function (data) {
var html = '';
if ($.isArray(data)) {
$.each(data, function (i, obj) {
html += tempList.temp(obj);
});
}
eleListBox.html(html || '<div class="tc cr pt30">丫的没数据啊！</div>');
},
error: function () {
eleListBox.html('<div class="tc cr pt30">数据获取失败！</div>');
}
}); // history处理
var title = "上海3月开盘项目汇总-" + $(this).text().replace(/\d+$/, "");
document.title = title;
if (event && /\d/.test(event.button)) {
history.pushState({title: title}, title, location.href.split("?")[0] + "?" + query);
}
}
return false;
});
//该方法有多重用处 1. 页面初始载入时第一次调用,带参第二次调用 2.后退 前进是调用
var fnHashTrigger = function (target) {
var query = location.href.split("?")[1], eleTarget = target || null;
if (typeof query == "undefined") { //首次载入 //首次进入时
if (eleTarget = eleMenus.get(0)) { //是"=" 先赋值,然后在判断eleTarget是否为空
history.replaceState(null, document.title, location.href.split("#")[0] + "?" + eleTarget.href.split("?")[1] +"#"+ location.hash);
fnHashTrigger(eleTarget);
}
} else {
eleMenus.each(function () {
if (eleTarget === null && this.href.split("?")[1] === query) { ///eleTarget === null 在第二次调用时起作用,
eleTarget = this;
}
}); if (!eleTarget) {
history.replaceState(null, document.title, location.href.split("?")[0]+"#"+location.hash);
fnHashTrigger();
} else {
$(eleTarget).trigger("click");
}
}
};
//初始载入时 history.pushState 不为空
if (history.pushState) {
window.addEventListener("popstate", function () { //popstate 点击浏览器的前进后台 、或者调用history。go（back）时触发该事件
fnHashTrigger();
});
// 默认载入
//alert("00");
fnHashTrigger(); //初始载入时调用
// alert(3);
}
</script> </body>
</html>
ajax页面中的前进与后台的实现的更多相关文章
- jsp页面中使用javascript获取后台放在request或session中的值
在JSP页面中.常常使用javascript,可是要出javascript获取存储在request,session, application中的值.例如以下是获取request中的值: 如果后台中有: ...
- 在前台jsp页面中取得并使用后台放入域中变量的方法
定义成 js变量后,在js中也可以自由使用.
- JS中直接从java后台获得对象的值（数组的值）
这里举得例子是:JS直接从后台Contorller中(SpringMVC中的model中)获得数值的值 Contorller 此处将 talentIntegralRecordsDay talentIn ...
- C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)
此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...
- JSF页面中使用js函数回调后台bean方法并获取返回值的方法
由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的, ...
- ajax中向HTML页面中指定位置添加信息
$.ajax({ type : "POST", beforeSend : function() { showLoader("数据加载中...");// ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- 微信返回上一页，页面中的AJAX的请求，对Get请求无效的解决办法
问题产生原因 最近在做一个微信的项目时,遇到一种很常见的情况,需求是这样的,当用户进入到"我的个人中心"的时候,会有一个点击跳转填写认证资料的按钮,点击此按钮后,会跳转 ...
- salesforce零基础学习（八十六）Ajax Toolkit （VF页面中使用及javascript action使用）
Ajax Toolkit 参考文档:https://resources.docs.salesforce.com/212/latest/en-us/sfdc/pdf/apex_ajax.pdf 在项目中 ...
随机推荐
- Linux的驱动模块管理：modprobe
由一段脚本開始: MODULE_PATH=/lib/modules/`uname -r` if [ ! -f ${MODULE_PATH}/modules.dep.bb ]; then # depmo ...
- CentOS7 安装 Node.js
1.首先安装node.js 的版本管理工具 NVM,执行以下命令: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/ ...
- 【JMeter4.0学习（九）】之定时器
目录: 固定定时器 高斯随机定时器 附 一.固定定时器 1.添加线程组 2.添加固定定时器 3.添加HTTP请求 4.添加结果树以及运行 二.高斯随机定时器 1.添加线程组 2.添加高斯随机定时器 ...
- synchronized是什么
在再有人问你Java内存模型是什么,就把这篇文章发给他中我们曾经介绍过,Java语言为了解决并发编程中存在的原子性.可见性和有序性问题,提供了一系列和并发处理相关的关键字,比如synchron ...
- STM32 Option Bytes位 重置为出厂设置
STM32 Option Bytes位 重置为出厂设置 JLINK 按照说明,在IAR安装目录下找到指定的运行程序JLinkSTM32.exe(D:\Program Files (x86)\IAR S ...
- php函数unserialize数据返回false问题分析
unserialize的这个问题是由一个emlog论坛用户在使用时报错而发现的 问题表现情况如下: emlog缓存的保存方式是将php的数据对象(数组)序列化(serialize)后以文件的形式存放, ...
- Laravel开发：Laravel核心——Ioc服务容器源码解析（服务器绑定）
服务容器的绑定 bind 绑定 bind 绑定是服务容器最常用的绑定方式,在 上一篇文章中我们讨论过,bind 的绑定有三种: 绑定自身 绑定闭包 绑定接口 今天,我们这篇文章主要从源码上讲解 Ioc ...
- 【BZOJ4548】小奇的糖果 set(链表)+树状数组
[BZOJ4548]小奇的糖果 Description 有 N 个彩色糖果在平面上.小奇想在平面上取一条水平的线段,并拾起它上方或下方的所有糖果.求出最多能够拾起多少糖果,使得获得的糖果并不包含所有的 ...
- Alamofire 小试牛刀
1.定义请求头 let headers: HTTPHeaders = [ "token": "W4SIjb3gHgJqgG8LRWj0jM==", " ...
- 我的Android进阶之旅------>如何获取Android控件的宽和高
本文转载于:http://blog.csdn.net/johnny901114/article/details/7839512 我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我 ...