AJAX实现指定部分页面刷新效果

本文实例为大家分享了AJAX实现指定部分页面刷新效果的具体代码，供大家参考，具体内容如下

这个例子使用了bootstrap，jQuery和NProgress进度条插件，事先需引入相关文件。

需求：点击左边的选项，不需要整个页面刷新，只进行右边页面的刷新。

这里需要三个文件

work.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
</head>
<body>
      <main id="main">
        <h2>这是工作经验界面</h2>
        <hr>
      </main>
</body>
</html>

hobbit.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
</head>
<body>
      <main id="main">
        <h2>这是兴趣爱好界面</h2>
        <hr>
      </main>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
  <link rel="stylesheet" href="../nprogress.css" rel="external nofollow" >
  <script src="../nprogress.js"></script>
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html" >个人信息</a>
          <a class="list-group-item list-group-item-action" href="work.html" >工作经验</a>
          <a class="list-group-item list-group-item-action" href="hobbit.html" >兴趣爱好</a>
        </div>
      </aside>
      <main id="main" class="col-md-9">
        <h2>这是我的个人信息界面</h2>
        <hr>
      </main>
    </div>
  </div>
  <script src="../jquery-3.4.1.js"></script>
  <script>
    $(function ($) {
  // 入口函数带参数$,原因是有一个独立的作用域，顺便确保页面加载完成执行

  //全局AJAX事件处理
      $(document)
        .ajaxStart(function () {
          NProgress.start()
        })
        .ajaxStop(function () {
          NProgress.done()
        });
      $('.list-group-item').on('click', function () {
        var url = $(this).attr('href')
        //后面的 #main 指的是载入页面的 id
        $('#main').load(url + ' #main > *')
        //列表组中是 a 标签，禁止它跳转到相应界面
        return false
      })
    })
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页

    复制代码 代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g

  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

    在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题. 总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Int

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

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

  • 使用ajax实现无刷新改变页面内容和地址栏URL

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大的功能呢? HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 虽然ajax可以无刷新改变页面内容,但无法改变页面URL 其次为了更好的可访

  • Ajax实现页面自动刷新实例解析

    Ajax实现页面自动刷新实例解析

    Ajax简介: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重

  • django+js+ajax实现刷新页面的方法

    本文实例讲述了django+js+ajax实现刷新页面的方法.分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服务器.这样可以将服务器的维护工作暴漏在更加友好的界面操作,而非通过SecureCRT去敲指令.而且还能提供给策划运维人员来处理一些常规的事情. 这里将会讲解一个非常小的知识点: ① js如何发起一次请求 ② django如何响应请求 ③ js接收到响应如何区域刷新页面 js部分 我们先在html中定

  • Ajax+php数据交互并且局部刷新页面的实现详解

    Ajax+php数据交互并且局部刷新页面的实现详解

    什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主

  • 基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题

    需要使用的 jquery.history.js插件 在巨人的肩膀之上,以下前进后退工作基于插件完成! 做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求.发现浏览器的刷新,后退,前进按钮失效.于是乎google了一下.发现了一些解决方法.其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求. 换另外一个插件测试下,完美达到我的要求. 总的思路,在url上加上参数,一切工作基于这个参数完成. 复制代码 代码如下: //截取传入字符串中第一次出

  • 浅谈Ajax技术实现页面无刷新

    ajax (ajax开发) AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新

  • Ajax回退刷新页面问题的解决办法

    Ajax 简介: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须

随机推荐