如何通过ajax实现页面的本地加载，如下

当你点击头部右上角的链接时，页面会根据对应的链接加载新的内容并显示在底部；中间有三列。当你点击第一列的链接时，对应的内容会出现在第二列，当你点击第二列的内容时，第三列的内容会根据第二列的链接加载。

页面如下所示：

Js代码如下：

$(“标题a”)。on('click ')，函数(e){ e . preventdefault()；//阻止事件的默认行为var href=this.href//记录要加载的页面的链接//更新当前连接状态$ ('header a ')。移除类(“当前”)；$(这个)。add CLaSS(' current ')；var $ content=$(' # content ')；var $ container=$(' # container ')；$ container . remove()；$ content . load(href ' # container ')；//加载页面id=container}的内容)；变化的时间；//times用于存储所有活动的链接时间表$。ajax({ type:'get '，//指定get方法URL 3360 '示例。JSON '，async3360 true，在send3360函数(jqxhr)之前{//在浏览器请求JSON数据之前，脚本会检查浏览器是否支持overrideMineType()方法。//这个方法会用来告诉服务器应该返回JSON数据。//当服务器被意外配置为以其他格式返回数据时，如果(jqxhr。override metype){ jqxhr。override metype(' application/JSON ')；} } });函数loadTimeTable在示例. json文件$)中加载加载时间表的数据。getjson ('example.json ')。done(函数(数据){//加载成功，值保存在times //console.log(数据)中；次数=数据；}).fail(function(){ //未能加载$(“# event”))。html('对不起！我们现在无法加载时间表。});} loadTimeTable//调用函数//点击活动名称，将活动时间载入中间一列$ ('# content ')。on ('click '，' # event a '，function(e){ e . prevent default()；var loc=this . id . touppercase()；//保存活动位置的名称var newContent=//为(var i=0)设置显示样式排版；我乘以[loc]。长度；i ){ //alert(times[loc][i]。时间)；new content=' lispan class=' time ' ' times[loc][I]。时间'/跨度'；new content=' a href=' descriptions . html # ' rel=' external no follow ' title=' times[loc][I]. title . replace(//g，'-')' ' '；newContent=times[loc][i]。标题'/a/Li '；} $(' # session ')。html(' ul ' NewContent '/ul ')；$('#event a ')。removeClass('当前')；//更新活动链接的class属性，突出显示当前活动$(this)。add CLaSS(' current ')；$('#details ')。文本(“”)；//如果第三列包含内容，则清空})；//点击中间一栏的链接生成相应的信息，会加载链接$ ('# content ')的描述信息。on ('click '，' # sessions a '，函数(e){ e . prevent default()；var fragment=this . href . replace(' # '，' # ')；//更新当前连接状态$ ('# details a ')。remove class(' current ')；$(这个)。add CLaSS(' current ')；$('#details ')。加载(分割this . title)；//在descriptions.html页面找到id对应的部分，加载到当前页面})；整个演示的地址

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。