先上HTML代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>何明胜的个人网站</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" ???content="欢迎来到何明胜的个人网站.本站主要用于记录和分享本人的学习心得和编程经验,并分享常见可复用代码、推荐书籍以及软件等资源.本站源码已托管github,欢迎访问：https://github.com/HelloHusen/web" /><meta name="keywords" content="何明胜,何明胜的个人网站,何明胜的博客,一格的程序人生" /><meta name="author" content="何明胜,一格"><!-- 网站图标 --><link rel="shortcut icon" href="/images/favicon.ico"><!-- jQuery --><script src="/plugins/jquery/js/jquery-3.2.1.min.js"></script><!-- 最新更新文章简介 --><link rel="stylesheet" href="/css/index/article-profile.css"><!-- 最新更新文章简介 --><link rel="stylesheet" href="/css/index/index.css"><!-- 加载最新3篇博客 --><script src="/js/index/latestblog.js"></script><!-- 加载最近3篇代码 --><script src="/js/index/latestcode.js"></script><!-- js文件 ?--><script src="/js/index/index.js"></script></head><body> ???<input id="menuBarNo" type="hidden" value="0" /> ???<div id="fh5co-page"> ???????<!-- 左侧导航 ?--> ???????<!-- 中间内容 ?--> ???????<div id="fh5co-main"> ???????????<!-- 首页轮播 ?--> ???????????<div id="indexCarousel" class="carousel slide carousel-height carousel-margin"> ???????????????<!-- 轮播（Carousel）指标 --> ???????????????<ol class="carousel-indicators"> ???????????????????<li data-target="#indexCarousel" data-slide-to="0" class="active"></li> ???????????????????<li data-target="#indexCarousel" data-slide-to="1"></li> ???????????????????<li data-target="#indexCarousel" data-slide-to="2"></li> ???????????????</ol> ???????????????<!-- 轮播（Carousel）项目 --> ???????????????<div class="carousel-inner"> ???????????????????<div class="item carousel-height active"> ???????????????????????<img src="/images/carousel/casel-1.jpg" alt="First slide"> ???????????????????</div> ???????????????????<div class="item carousel-height"> ???????????????????????<img src="/images/carousel/casel-2.jpg" alt="Second slide"> ???????????????????</div> ???????????????????<div class="item carousel-height"> ???????????????????????<img src="/images/carousel/casel-3.jpg" alt="Third slide"> ???????????????????</div> ???????????????</div> ???????????????<!-- 轮播（Carousel）导航 --> ???????????????<a class="left carousel-control" href="#indexCarousel" role="button" ???????????????????data-slide="prev"> <span ???????????????????class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> ???????????????????<span class="sr-only">Previous</span> ???????????????</a> <a class="right carousel-control" href="#indexCarousel" role="button" ???????????????????data-slide="next"> <span ???????????????????class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> ???????????????????<span class="sr-only">Next</span> ???????????????</a> ???????????</div> ???????????<div class="fh5co-narrow-content article-box-div"> ???????????????<h2 class="fh5co-heading article-bar" ???????????????????data-animate-effect="fadeInLeft">最近更新的博客</h2> ???????????????<a href="/module/blog.hms" class="read-more-article"><span ???????????????????class="glyphicon glyphicon-hand-right"></span> 阅读更多博客</a> ???????????????<div id="latestBlog" class="row"></div> ???????????</div> ???????????<hr class="index-hr" /> ???????????<div class="fh5co-narrow-content article-box-div"> ???????????????<h2 class="fh5co-heading article-bar" ???????????????????data-animate-effect="fadeInLeft">最近更新的代码</h2> ???????????????<a href="/module/code.hms" class="read-more-article"><span ???????????????????class="glyphicon glyphicon-hand-right"></span> 阅读更多代码</a> ???????????????<div id="latestCode" class="row"></div> ???????????</div> ???????????<!-- 每日一言 ?--> ???????????<script ???????????????src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script> ???????????<div id="lwlhitokoto"> ???????????????<script> ???????????????????lwlhitokoto(); ???????????????</script> ???????????</div> ???????</div> ???????<!-- 右侧导航 ?--> ???</div></body></html>
再上JavaScript代码：
1 /** 2 ?* 首页 3 ?* ?4 ?* @author 何明胜 5 ?* ?6 ?* 2017年12月15日 7 ?*/ 8 ?9 /** 加载插件 * */10 $.ajax({11 ????url : ‘/plugins/plugins.html‘, // 这里是静态页的地址12 ????async : false,13 ????type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误14 ????success : function(data) {15 ????????$($(‘head‘)[0]).find(‘script:first‘).after(data);16 ????}17 });18 19 $(function() {20 ????/** 顶部导航栏 **/21 ????$.ajax({22 ????????url : ‘/module/navigation/topbar.html‘, // 这里是静态页的地址23 ????????async : false,24 ????????type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误25 ????????success : function(data) {26 ????????????$(‘#menuBarNo‘).before(data);27 ????????}28 ????});29 30 ????/** 登录控制 **/31 ????$.ajax({32 ????????url : ‘/module/login/login.html‘, // 这里是静态页的地址33 ????????async : false,34 ????????type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误35 ????????success : function(data) {36 ????????????$(‘#menuBarNo‘).before(data);37 ????????}38 ????});39 ????40 ????/** 左侧导航栏 **/41 ????$.ajax({42 ????????url : ‘/module/navigation/leftbar.html‘, // 这里是静态页的地址43 ????????async : false,44 ????????type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误45 ????????success : function(data) {46 ????????????$(‘#fh5co-main‘).before(data);47 ????????}48 ????});49 ????50 ????/** 右侧导航栏 **/51 ????$.ajax({52 ????????url : ‘/module/navigation/rightbar.html‘, // 这里是静态页的地址53 ????????async : false,54 ????????type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误55 ????????success : function(data) {56 ????????????$(‘#fh5co-main‘).after(data);57 ????????}58 ????});59 });60 61 $(document).ready(function() {62 ????$(‘#indexCarousel‘).carousel({63 ????????interval : 300064 ????});// 每隔3秒自动轮播65 });上述JS代码中，包含三个重要的函数 $.ajax( )、$(function() { })、$(document).ready(function() { }。
$.ajax() 方法通过 HTTP 请求加载远程数据，该方法是 jQuery 底层 AJAX 实现，简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。
web-pc项目中index页面分析
原文地址：https://www.cnblogs.com/ratels/p/10320441.html