如何利用jQuery局部刷新页面中的div元素内容

 我们在做网页的时候，尤其是后台管理的网页，左边是树状的主题list，右边是要刷新的内容。效果就是：希望点击list中的不同标题，右边就能显示内容，而左边不变，即是只刷新右边的div区域。

要实现这个效果我们通常的做法就是：动态的循环数据，把数据和要实现的样式拼接成一个String字符串，使用jQuery的append方法把字符串加载到网页的div中。这也是我们通常会想到的方法，但是这种方法会有大量的字符串拼接很麻烦，写写代码心态就崩了，在使用easyui后发现它的选项页很方便想要这样的，怎么办?bootstrap中能实现吗?如何利用Ajax同jQuery实现？

 使用jquery的ajax技术，将数据读入。相关的函数有$.ajax()，$.get()，$.post()，$.load() 等函数。其中的$.load()方法：通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

例子如下：在js中定义点击方法，把这个方法添加到左侧树状的标签中去，通过.load()把页面加载到当前页面实现页面的局部刷新，被引用的页面中的CSS文件和jscript文件都要在当前页重新引用，其中的jscript文件的初始化要做限制。

<ul class="treeview-menu">
        <li><a href="javascript:void(0)" οnclick="pageJump('view/pictureManage/startPageManager.html')"><i class="fa fa-circle-o"></i>启动页管理</a></li>
        <li><a href="javascript:void(0)" οnclick="pageJump('view/pictureManage/carouselFigureManager.html')"><i class="fa fa-circle-o"></i>轮播图管理</a></li>
 </ul>

function pageJump(url) {
        var urlData = url;
        //把静态网页路径和要加载的页面的内容的ID拼接
        var request = url + " " + "#startPage";
        $("#contentLoading").load(request,null,function () {
            switch (urlData){
                case 'view/pictureManage/startPageManager.html' :
                    getStartPic();
                    break;
                case 'view/pictureManage/carouselFigureManager.html' :
                    getStartPic();
                    break;
            }
        });
    }

注：1、append() 方法在被选元素的结尾（仍然在内部）插入指定内容。