Jquery的Load()方法实现ajax局部页面刷新效果及案例

简介：传统的查询页面是：输入查询条件，点击“搜索”后，提交表单，到查询条件传输到后台，获取数据后，跳转到原页面，然后通过循环显示查询到的结果。这样的不足是：页面会闪动，体验不好。
jquery中的Load方法就可以达到无页面跳转实现局部刷新效果

Load定义：load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

1. 实现效果（点击侧边栏，局部刷新，页面并没有跳转效果）

2.代码

<script>
    $(function () {
        //点击右侧栏触发事件
        $('.list-group-item').on('click', function () {
          var url = $(this).attr('href')
          //注意：url和main连接时候中间必须有一个空格
          $('#main').load(url + ' #main > *')
         
          return false
        })
    })
</script>

url：就是根据点击的a标签获取需要跳转的路径
mian：不给#mian就是把其他页面全部加载进来，给了main就是把其他页面main这块区域的代码加载进来。
*： 不需要其他页面的Miain，只需要main下面的其他代码，所以用了子代的 * (通配)
return false: //设置点击a链接禁止a标签跳转