ajax怎样完成页面的部分加载,实际以下

点击头顶部即右上方的连接时,页面会依据相对的连接加载新的内容,显示信息在正下方;在中间地区有3栏,当点击1栏中的连接,2栏中会呈现相对的内容,点击2栏中的内容,3栏中的内容又会依据2栏的连接来加载显示信息内容。

页面实际效果以下:

ajax实现页面的局部加载 局部加载 ajax AJAX相关  第1张

js代码以下:

$("header a").on("click",function(e){
 e.preventDefault(); //阻拦恶性事件默认设置个人行为
 var href = this.href; //纪录要加载页面的连接

 //升级当今联接情况
 $("header a").removeClass("current");
 $(this).addClass("current");

 var $content = $("#content");
 var $container = $("#container");
 $container.remove();
 $content.load(href   " #container"); //加载页面id = container的内容

 });


 var times; //times用于储存全部主题活动的阶段时刻表
 $.ajax({
 type:"get", //特定get方法
 url:"example.json",
 async:true,
 beforeSend: function(jqXHR){ 
  //在电脑浏览器要求JSON数据以前,脚本制作会查验电脑浏览器是不是适用overrideMineType()方式 。
  //该方式 会用于告之网络服务器理应回到JSON数据。
  //当网络服务器出现意外配备成回到别的格式的数据时,就可以应用这一方式 了
  if(jqXHR.overrideMimeType){
  jqXHR.overrideMimeType("application/json"); 
  }
 }
 });

 function loadTimeTable(){//加载example.json文档中加载时刻表的数据
 $.getJSON(
  "example.json"
 ).done(function(data){ //加载取得成功,值被储存到times中
  //console.log(data);
  times = data;
 }).fail(function(){ //加载不成功
  $("#event").html("Sorry!we could not load the timetable at the moment");
 });
 }

 loadTimeTable(); //调用函数

 //点击活动名称,将该主题活动的時间加载到中栏
 $("#content").on("click","#event a",function(e){
 e.preventDefault(); 

 var loc = this.id.toUpperCase(); //储存主题活动部位的名字
 var newContent = ''; //设定展现款式排版设计
 for(var i = 0; i < times[loc].length; i  ){
  //alert(times[loc][i].time);
  newContent  = '<li><span class="time">'  times[loc][i].time  '</span>';
  newContent  = '<a href="descriptions.html#" rel="external nofollow" title="'  times[loc][i].title.replace(/ /g,'-')  '">';
  newContent  = times[loc][i].title   '</a></li>';
 }

 $("#sessions").html('<ul>' newContent '</ul>');

 $("#event a").removeClass("current"); //升级主题活动连接的class属性,借此机会突显当今主题活动
 $(this).addClass("current");

 $("#details").text(''); //假如第三栏中包括内容,就清除它
 });


 //点击中栏中的阶段是造成相对,它会加载阶段的叙述信息内容
 $("#content").on("click","#sessions a",function(e){
 e.preventDefault();
 var fragment = this.href.replace('#',' #');
 //升级当今联接情况
 $("#details a").removeClass("current");
 $(this).addClass("current");

 $("#details").load(fragment this.title); //搜索到descriptions.html页面中id相匹配的一部分加载到当今页面
 });

全部demo的详细地址

之上便是文中的所有内容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用。