jQuery+ajax实现点击左侧菜单，右侧动态加载不同页面的两种方法

效果图如下

一、完成整体布局（以下只有左侧菜单以及右侧网页）

<div class="content">

            <div class="s-side">
                <ul>
                    <!--这部分是导航栏信息。-->
                    <li class="s-firstItem first">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            <span>首页</span>
                        </a>
                    </li>

                    <li class="first">
                        <div class="d-firstNav s-firstNav clearfix">
                            <i class="fa fa-bars"></i>
                            <span>选课管理</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-firstDrop s-firstDrop">
                            <li>
                                <div class="d-secondNav s-secondNav">
                                    <i class="fa fa-minus-square-o"></i>
                                    <span>选课信息管理</span>
                                    <i class="fa fa-caret-right fr"></i>
                                </div>
                                <ul class="d-secondDrop s-secondDrop">
                                    <li class="s-thirdItem">
                                        <a href="#" onclick="loadPage('SubPages/SelectLessonDeal.aspx')">选课信息处理</a>
                                    </li>
                                    <li class="s-thirdItem">
                                        <a href="#" onclick="loadPage('SubPages/SelectLessonSearch.aspx')">选课信息查询</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div class="d-secondNav s-secondNav">
                                    <i class="fa fa-minus-square-o"></i>
                                    <span>课程信息管理</span>
                                    <i class="fa fa-caret-right fr "></i>
                                </div>
                                <ul class="d-secondDrop s-secondDrop">
                                    <li class="s-thirdItem">
                                        <a href="#" onclick="loadPage('SubPages/LessonInfoDeal.aspx')">课程信息处理</a>
                                    </li>
                                    <li class="s-thirdItem">
                                        <a href="#" onclick="loadPage('SubPages/LessonInfoSearch.aspx')">课程信息查询</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="first">
                        <div class="d-firstNav s-firstNav">
                            <i class="fa fa-bars"></i>
                            <span>用户管理</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-firstDrop s-firstDrop">
                            <li>
                                <div class="d-secondNav s-secondNav">
                                    <i class="fa fa-minus-square-o"></i>
                                    <span>用户信息管理</span>
                                    <i class="fa fa-caret-right fr "></i>
                                </div>
                                <ul class="d-secondDrop s-secondDrop">
                                    <li class="s-thirdItem">
                                        <a href="#" onclick="loadPage('SubPages/UserInfoDeal.aspx')">用户信息处理</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

            <div id="right">
            </div>
            
</div>

二、利用Ajax完成动态刷新

方法一

<script>
function loadPage(url) {
            $.ajax({
                type: "POST",
                url: url,
                async: true,
                dataType: "html",
                contentType: 'application/json; charset=utf-8',
                success: function (html) {
                    $('#right').html(html);
                    //$('#right').load(url);//load函数同样能实现效果
                }
            });
        }
</script>

方法二

<script>
function loadPage(url) {
           var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    $('#right').load(url);
                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
</script>

三、调用函数loadPage，并为其传递参数

<li class="s-thirdItem">
		<a href="#" onclick="loadPage('SubPages/LessonInfoDeal.aspx')">课程信息处理</a>
</li>
<li class="s-thirdItem">
		<a href="#" onclick="loadPage('SubPages/LessonInfoSearch.aspx')">课程信息查询</a>
</li>

添加鼠标点击事件并传入参数地址（相对地址）

四、总结

1.关于$.ajax的使用

参数

   type  //数据的提交方式：get和post
   
   url   //数据的提交路径

   async   //是否支持异步，默认是true

   data    //需要提交的数据

   dataType   //服务器返回数据的类型，例如html、xml、Json、String等

   success    //请求成功后的回调函数

   error   //请求失败后的回调函数

2.ajax相比于iframe，布局上ajax更轻巧，用户体验上异步通信速度更快
3.缺点破坏了浏览器后退机制，存在一定安全隐患，浏览器不兼容