广告位联系
返回顶部
分享到

ajax实现页面的局部加载的方法

Ajax 来源:互联网搜集 作者:秩名 发布时间:2018-11-05 22:01:50 人浏览
摘要

今天小编给大家介绍ajax实现页面的局部加载的方法。 点击头部即右上角的链接时,页面会根据相应的链接加载新的内容,显示在下方;在中间区域有3栏,当点击1栏中的链接,2栏中会显现相应的内容,点击2栏中的内容,3栏中的内容又会根据2栏的链接来加载显示内容

今天小编给大家介绍ajax实现页面的局部加载的方法。

点击头部即右上角的链接时,页面会根据相应的链接加载新的内容,显示在下方;在中间区域有3栏,当点击1栏中的链接,2栏中会显现相应的内容,点击2栏中的内容,3栏中的内容又会根据2栏的链接来加载显示内容。

页面效果如下:



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对应的部分加载到当前页面
 });



版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • AJAX原理以及axios、fetch区别

    AJAX原理以及axios、fetch区别
    AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,
  • Ajax实现上传图像功能

    Ajax实现上传图像功能
    最终效果展示 xhr发起请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
  • Ajax的疑难杂症介绍

    Ajax的疑难杂症介绍
    跨域问题 如图所示,这是通过jquery封装的ajax请求了一个本地的php文件(无框架),console提示CORS策略已阻止来自来源的null:请求的资源上不
  • 前端实现滑动按钮AJAX与后端交互的代码

    前端实现滑动按钮AJAX与后端交互的代码
    html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1
  • AJAX实现省市县三级联动效果

    AJAX实现省市县三级联动效果
    (tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现) 效果图 首先准备两个服务端文件,另一个文件太长,这里就不
  • AJAX实现指定部分页面刷新效果的代码

    AJAX实现指定部分页面刷新效果的代码
    需求:点击左边的选项,不需要整个页面刷新,只进行右边页面的刷新。 这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF
  • Ajax实现三级联动的代码

    Ajax实现三级联动的代码
    一、导入数据表和gson.jar 该表包括了中国所有的
  • AJAX实现注册验证用户名的代码
    功能说明 当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可用,否则
  • react axios跨域访问一个或多个域名问题的详解
    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: proxy:http://iot-demo-web-dev.autel.com, //当然,这里是一
  • $.ajax中contentType: “application/json” 的用法
    具体内容如下所示: $.ajax({ type: httpMethod, cache:false, async:false, contentType: application/json; charset=utf-8, dataType: json,//返回值类型 url: path+url, data:j
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计