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 在项目中 ...

随机推荐

C# virtual,override,new 整理
今天仔细学习了一下C#中virtual, override, new关键字,参考了网上的很多资料,现整理一下. Virtual: virtual 关键字用于修饰方法.属性.索引器或事件声明,并使它们可 ...
Weka学习之关联规则分析
步骤: (一) 选择数据源 (二)选择要分析的字段 (三)选择需要的关联规则算法 (四)点击start运行 (五) 分析结果算法选择: Apriori算法参数含义 1.car:如果设为真,则会挖掘类 ...
LeetCode 206. Reverse Linked List(迭代和递归两种实现)
递归的代码比迭代的代码看起来更清爽一些,也是由于递归对行为进行了抽象吧. 注意到,这是一个尾递归函数.一些编译器会将它优化为迭代,这样一方面,在代码层面保持了清晰的逻辑和可读性.一方面保持了代码的性能 ...
cobbler+koan
cobbler+koan自动重装客户机 koan是kickstart-over-a-network的缩写,它是cobbler的客户端帮助程序,koan允许你通过网络提供虚拟机,也允许你重装已经存在 ...
The Pilots Brothers' refrigerator - poj 2965
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20325 Accepted: 7830 Special Judg ...
push推送服务设计
PUSH系统架构设计简述一.网络传输协议的选择 PUSH系统协议选取: UDP协议实时性更好,但是如何处理安全可靠的传输并且处理不同客户端之间的消息交互是个难题,实现起来过于复杂,那就非TCP协议莫 ...
object.Equals与object.ReferenceEquals方法
object.Equals方法表达的是语义判等,不一定是引用判等. object.ReferenceEquals方法是肯定是引用判等. 怎么实现一个对象的值语义的 Equals方法?实验. MyCla ...
苹果input点击页面稍微变大的问题
今天在群里看到有人问input标签点击以后在ios下页面会变大一点的问题说实话我是没有遇到过后来解决了我看了一下代码我明白了不是我没有遇到过是因为我写的比较规范所以没出现那样的问题嘿嘿. ...
转载:Python 包管理工具解惑
Python 包管理工具解惑本站文章除注明转载外,均为本站原创或者翻译. 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商: 本站部分原创和翻译文章提供m ...
自定义TextView带有各类.ttf字体的TextView
最近项目遇到了将普通文字转化为带有字体样式的文字,这里就涉及到了.ttf文件,我上网百度了不少资料最终终于实现了,现在想想其实并不复杂 1,你需要下载一种.ttf字体文件,你可以从网上找到一种字体的. ...

ajax页面中的前进与后台的实现

ajax页面中的前进与后台的实现的更多相关文章

随机推荐

热门专题