AJAX实现指定部分页面刷新效果的代码_F11 - 专业站长和开发者的学习网站

分享到

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

Ajax 来源：转载作者：秩名发布时间：2021-10-14 12:46:54 人浏览

摘要

需求：点击左边的选项，不需要整个页面刷新，只进行右边页面的刷新。这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF-8 title主页面/title/headbody main id=main h2这是工作经验界面/h2 hr /main/body/html hobbit.html !D

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

这里需要三个文件

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>

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/weixin_40292154/article/details/105963037

Tag : Ajax(34)

AJAX原理以及axios、fetch区别

AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，
Ajax实现上传图像功能

最终效果展示 xhr发起请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
Ajax的疑难杂症介绍

跨域问题如图所示，这是通过jquery封装的ajax请求了一个本地的php文件（无框架），console提示CORS策略已阻止来自来源的null：请求的资源上不
前端实现滑动按钮AJAX与后端交互的代码

html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1
AJAX实现省市县三级联动效果

（tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现）效果图首先准备两个服务端文件，另一个文件太长，这里就不
AJAX实现指定部分页面刷新效果的代码

需求：点击左边的选项，不需要整个页面刷新，只进行右边页面的刷新。这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF
Ajax实现三级联动的代码

一、导入数据表和gson.jar 该表包括了中国所有的
AJAX实现注册验证用户名的代码

功能说明当用户在注册页面输入用户名并且鼠标焦点离开输入框时，到数据表中去验证该用户名是否已经存在，如果存在提示不可用，否则
react axios跨域访问一个或多个域名问题的详解

1.react + axios 跨域访问一个域名配置非常简单，只需要在当前的 package.json 文件里面配置： proxy:http://iot-demo-web-dev.autel.com, //当然，这里是一
$.ajax中contentType: “application/json” 的用法

具体内容如下所示： $.ajax({ type: httpMethod, cache:false, async:false, contentType: application/json; charset=utf-8, dataType: json,//返回值类型 url: path+url, data:j