jQuery+ajax如何实现局部刷新

这篇文章主要介绍了jQuery+ajax如何实现局部刷新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

师宗ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load()。

第一种:

当某几个页面都有相同的头部、导航、底部的时候,点击导航链接可以在几个页面中切换,此时想要的效果是点击链接后只切换内容部分,其他不再重新加载。上代码。

jq-load.html:



 
  ajax局部刷新
 
 
  
      
            首页的内容    
          

注:jq-load2.html、jq-load3.html与jq-load.html代码基本一致,只在#container的div里展示的内容不一样。

jq-load.js:

$('nav a').on('click', function(e) {         
 e.preventDefault(); // 阻止链接跳转
 var url = this.href; // 保存点击的地址

 $('nav a.current').removeClass('current');  
 $(this).addClass('current');           

 $('#container').remove();             
 $('#content').load(url + ' #container').fadeIn('slow'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container
});

注:此种方法用到了一些html5里面的新标记,在js中创建它们不再赘述。

第二种:

如果网页的左侧有一个列表,点击列表使右侧的内容进行切换,如果右侧的内容过多,不适合做选项卡,这时候用.load()局部刷新最好不过了。上代码。

user.html:



  
    个人中心
    
    
    
  
  
    
      
        用户中心
        账户信息
        交易记录
        消息中心
      
      
    
  

user.js:

$(function(){
  $(".userMenu").on("click", "li", 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 "#center": pathn = "user_center.html"; i = 0; break;
       case "#account": pathn = "user_account.html"; i = 1; break;
      case "#trade": pathn = "user_trade.html"; i = 2; break;
      case "#info": pathn = "user_info.html"; i = 3; break;
       default: pathn = "user_center.html"; i = 0; break;
    }
    $("#content").load(pathn); //加载相对应的内容
    $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
  }
  var sId = window.location.hash;
  loadInner(sId);
});

user_center.html:

  用户中心   ……

注:其他user_xxx.html的页面也是列表相对应的内容,此处不再赘述。

总结:

以上两种方法原理是一样的,通过.load()重新加载页面中的某一部分,需注意,ajax需要在服务器环境下运行。通过对比,可发现第一种比较简单,第二种稍复杂些,不过个人推荐第二种,第一种主要是举个例子,看.load()是怎么来用的,其实它在用户体验方面稍逊一筹,比如点击的时候地址栏里地址不变,使前进、后退失效,这个可以到后面再实现。而第二种的话运用比较灵活,巧妙的借助data-*的自定义属性来存储数据,点击的时候修改锚点,因为地址有变,所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

感谢你能够认真阅读完这篇文章,希望小编分享的“jQuery+ajax如何实现局部刷新”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前文章:jQuery+ajax如何实现局部刷新
本文URL:http://myzitong.com/article/ipooeo.html

其他资讯