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.缺点破坏了浏览器后退机制，存在一定安全隐患，浏览器不兼容