jQuery Load的简介

jQuery提供的ajax接口，其中的一种方法load，可以非常方便的调用服务器端的HTML，然后插入某个DOM元素里。我的博客使用Blogger日志引擎，每次更新页面一个元素的内容，就要修改模板，然后重新发布修改每一个相关的帖子，非常的没有效率。例如本博客边侧栏的“日志分类”和“收藏我的日志”栏目，其中的内容经常要更新。我就是用jQuery提供的load的方法，把这些栏目的内容存放在独自的HTML文件里，然后在页面装载的时候自动导入。具体方法如下：

1.日志分类HTML，labels.html（样本）

<h2 class="sidebar-title">日志分类</h2>

<ul>

  <li><a href="/blog/categories/css.html" >CSS</a>&nbsp;(11)</li>

  <li><a href="/blog/categories/html.html">HTML</a>&nbsp;(6)</li>

</ul>

2.模板边侧栏HTML（样本）

<div id="sidebar"> <!--日志边侧栏-->

  <div id="labels"></div> <!--日志分类栏目-->

</div>

3.jQuery代码

$(document).ready(function(){

  $("#labels").load("/blog/categories/labels.html"); 

  //在页面装载时，在ID为#labels的DOM元素里插入labels.html的内容。

});

这样一来，当我要对日志分类栏目的内容更新时，就不用去更改日志模板、重新发布更改每一个相关帖子了。我只要更新labels.html代码就可以了。

11/20更新 -- 想要对load有更多了解，请读另外两篇文章：

1. 防止jQuery Load使用缓存的方法
2. jQuery load的详解