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

效果图如下

在这里插入图片描述

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

           

               

                   

                   

•                        

                             

                              首页

                         

                     

                   

•                        

                             

                              选课管理

                             

                         

                         

                             

  •                                

                                       

                                        选课信息管理

                                       

                                   

                                   

                                       

    •                                         选课信息处理

                                         

                                       

    •                                         选课信息查询

                                         

                                   

                               

                             

  •                                

                                       

                                        课程信息管理

                                       

                                   

                                   

                                       

    •                                         课程信息处理

                                         

                                       

    •                                         课程信息查询

                                         

                                   

                               

                         

                     

                   

•                        

                             

                              用户管理

                             

                         

                         

                             

  •                                

                                       

                                        用户信息管理

                                       

                                   

                                   

                                       

    •                                         用户信息处理

                                         

                                   

                               

                         

                     

               

           

           

           

二、利用Ajax完成动态刷新

方法一

方法二

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

课程信息处理

课程信息查询

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

四、总结

1.关于$.ajax的使用

参数

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

 url  //数据的提交路径

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

  data    //需要提交的数据

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

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

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

2.ajax相比于iframe，布局上ajax更轻巧，用户体验上异步通信速度更快

3.缺点破坏了浏览器后退机制，存在一定安全隐患，浏览器不兼容

————————————————

原文链接：https://blog.csdn.net/qq_40910746/article/details/86597083

https://blog.csdn.net/DecadentF/article/details/77982511

https://blog.csdn.net/qq_38822390/article/details/81014417