• 注册
    • 今日签到
    • 连续签到
  • 游骑兵
    今天 00:00
    连续13
    关注
  • huiwu
    今天 01:56
    连续1
    关注
  • hanaicc
    今天 02:43
    连续3
    关注
  • xinle
    今天 04:54
    连续14
    关注
  • xinle
    很开心曾经在水晶之家与大家寻梦
    连续14
    关注
  • 连续13
    关注
  • 连续3
    关注
  • 连续1
    关注
  • 网站维护 关注:2 内容:14

    首页支持ajax局部刷新,附演示实例

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • ajax的作用是在页面不刷新的情况下  刷新局部数据。比较广泛应用于数据需要页面自动更新的地方,当然如果页面数据过多,不便展示也可以采用ajax的局部刷新来获取数据。完整例子如下,需要页面有jquery.JS的引用。

      <script>
      $(function(){
      $(".userMenu1").on("click", "i", function(){
      var sId = $(this).data("id"); //获取data-id的值
      window.location.hash = sId; //设置锚点
      loadInner(sId);
      });
      function loadInner(sId){
      var sId = window.location.hash;
      var pathn, i;
      switch(sId){
      case "#center1": pathn = "https://photo.babylyf.com//vidoe-ajax"; i = 0; break;
      }
      $("#content1").load(pathn); //加载相对应的内容
      $(".userMenu a").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
      }
      var sId = window.location.hash;
      loadInner(sId);
      });</script>
      <div class="userWrap">
      <div class="userMenu1">
      <i class="current" data-id="center">随便看看</i>
      </div>
      <div id="content1"></div>
      </div>

      效果如图,用户点击随便看看,会自动更新数据。不用刷新,可以一直点一直变动。

      你需要登录,才能进行发帖操作
    • 帖子间隔 侧栏位置: