HTML5 history API与ajax分页实例页面

Posted 2021-02-10 web瞎搞

<ul id="choMenu" class="rel cho_menu">
<li><a href="ajax.php?area=pudong" class="cho_link cho_link_on">浦东区<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>

 

 

<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) {
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;
});

var fnHashTrigger = function(target) {
var query = location.href.split("?")[1], eleTarget = target || null;
if (typeof query == "undefined") {
if (eleTarget = eleMenus.get(0)) {
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 = this;
}
});

if (!eleTarget) {
history.replaceState(null, document.title, location.href.split("?")[0]);
fnHashTrigger();
} else {
$(eleTarget).trigger("click");
}
}
};
if (history.pushState) {
window.addEventListener("popstate", function() {
fnHashTrigger();
});

// 默认载入
fnHashTrigger();
}
</script>