网页history ajax,HTML5 history API与ajax分页实例页面

• 浦东区8
• 宝山区7
• 嘉定区8
• 青浦区3
• 闵行区4
• 普陀区2
• 金山区3
• 松江区3
• 闸北区1
• 奉贤区5
• 黄浦区1
• 长宁区1
• 静安区1
• 上海周边1

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('

$.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 || '

},

error: function() {

eleListBox.html('

}

});

// 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();

}