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

效果图如下

jQuery+ajax实现点击左侧菜单,右侧动态加载不同页面的两种方法_第1张图片

在这里插入图片描述

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

           

               

                       

                       

  •                        

                               

                                首页

                           

                       

  •                    

  •                        

                               

                                选课管理

                               

                           

                           

                                 

    •                                

                                         

                                          选课信息管理

                                         

                                     

                                     

                                           

      •                                         选课信息处理

                                           

      •                                    

      •                                         选课信息查询

                                           

      •                                

                                 

    •                            

    •                                

                                         

                                          课程信息管理

                                         

                                     

                                     

                                           

      •                                         课程信息处理

                                           

      •                                    

      •                                         课程信息查询

                                           

      •                                

                                 

    •                        

                       

  •                    

  •                        

                               

                                用户管理

                               

                           

                           

                                 

    •                                

                                         

                                          用户信息管理

                                         

                                     

                                     

                                           

      •                                         用户信息处理

                                           

      •                                

                                 

    •                        

                       

  •                

           

           

二、利用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

    你可能感兴趣的:(jQuery+ajax实现点击左侧菜单,右侧动态加载不同页面的两种方法)