jQuery+ajax实现局部刷新的两种方法

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

第一种:

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

jq-load.html:

<!DOCTYPE html>
<html>
 <head>
  <title>ajax局部刷新</title>
 </head>
 <body>
  <header>
   <nav>
    <a href="jq-load.html" rel="external nofollow" class="current">首页</a>
    <a href="jq-load2.html" rel="external nofollow" >新闻资讯</a>
    <a href="jq-load3.html" rel="external nofollow" >用户中心</a>
   </nav>
  </header>
  <section id="content">
   <div id="container">
     首页的内容
   </div>
  </section>
  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/jq-load.js"></script>
 </body>
</html>

注: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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>个人中心</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/user.js"></script>
  </head>
  <body>
    <div class="userWrap">
      <ul class="userMenu">
        <li class="current" data-id="center">用户中心</li>
        <li data-id="account">账户信息</li>
        <li data-id="trade">交易记录</li>
        <li data-id="info">消息中心</li>
      </ul>
      <div id="content"></div>
    </div>
  </body>
</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:

<div>
  用户中心
  ……
</div>

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

总结:

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

以上所述是小编给大家介绍的jQuery+ajax实现局部刷新的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-06-05

jquery ajax 局部无刷新更新数据的实现案例

要更新的页面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>&l

jquery ajax 局部刷新小案例

复制代码 代码如下: <html><head><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> function getOtherMessage(){ $.ajax({ type:"post", url:"${pageConte

jQuery ajaxSubmit 实现ajax提交表单局部刷新

AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

JQuery的Ajax请求实现局部刷新的简单实例

请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面. 案例:如图 我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改

jQuery实现AJAX定时刷新局部页面实例

方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局部刷新 定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法. <script> $(function(){ setInterval(aa,10); func

jQuery实现form表单基于ajax无刷新提交方法实例代码

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

基于jquery实现ajax无刷新评论

jquery实现ajax无刷新评论需要用的技术:(本次试验用的是"jquery-1.4.2.js"版本的jquery) $.post("一般处理程序路径",{以字典的形式传递参数},function(data,status){``````}); jquery中的基本选择器操作: 首先创建数据库"T_article": 主键设置自增: 然后创建一个强类型的DataSet. 接着创建一个"无刷新评论.aspx"页面: 页面代码如下

jQuery实现ajax无刷新分页页码控件

这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是

基于jQuery实现Ajax验证用户名是否可用实例

本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/jquery_aj

Django中使用jquery的ajax进行数据交互的实例代码

jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

jQuery的ajax和遍历数组json实例代码

jQuery的ajax和遍历数组json实例代码 jQuery.ajax({ type: "POST", url: "server.json", dataType:'json', data: "", success: function(msg){ var title = ""; jQuery.each(msg,function(key,value){ alert(value.ec_id+" "+value.

基于jQuery实现的无刷新表格分页实例

本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica

基于jQuery实现Ajax验证用户名是否存在实例

本文章向大家分享基于jQuery实现的Ajax 验证用户名是否存在的实现代码,需要的码农朋友可以参考一下本文的源代码. jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详