Ajax实现页面局部刷新

最近开发网站，需要实现Ajax实现页面局部刷新，花了2天时间搞定，做个记录

开发环境

WAMP集成开发环境，也就是本地服务器

参考资料：

油管教学视频简单的例子，可能利用的是bootstap提供的一些功能实现的，没有用到Ajax。

2.雪霖冰的博客自己敲的代码在我的github中的Ajax实现页面局部刷新-异步中的标准页面刷新。

3.Ajax全接触视频通俗易懂，从原理到实现都很非常清楚，完全使用ajax来实现表达填写的实时监测反馈。

关键代码内容：

Ajax代码

<script src="plugins/jquery/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
  // 初次进入网站时的默认页面载入
     window.onload=ajaxLoad("home.html","myCnt");
  });
  function ajaxLoad(myUl,myID)
  {
    var request = new XMLHttpRequest();
    request.open("GET", myUl);
    request.send();
    request.onreadystatechange = function(){
      if (request.readyState === 4 && request.status===200) {
        document.getElementById(myID).innerHTML=request.responseText;
      }
    }
  }
// Ajax实现右边内容的载入，myUl是右边内容页面载入的链接地址；myID是载入后的内容需要添加到的html的位置对应的id(在标签section里)
</script>

调用

           <ul class="nav nav-treeview">
              <!-- 上传文件及预处理 -->
              <li class="nav-item">
                <a href="#" class="nav-link" onclick="ajaxLoad('upload.html','myCnt')">
                  <i class="fas fa-upload"></i>
                  <p>Upload</p>
                </a>
              </li>
              <!-- Data Process -->
              <li class="nav-item">
                <a href="#" class="nav-link" onclick="ajaxLoad('page2.html','myCnt')">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Quality Assessment</p>
                </a>
              </li>
              <!-- DEG Analysis -->
              <li class="nav-item">
                <a href="#" class="nav-link" onclick="ajaxLoad('page3.html','myCnt')">
                  <i class="far fa-circle nav-icon"></i>
                  <p>DEG Analysis</p>
                </a>
              </li>
            </ul>

刷新的内容放置的区域

<div id = "myCnt" class="content-wrapper"> //这里必须要用id，来匹配document.getElementById(myID)选择器
    
  </div>

以上！

最后编辑于：2019.07.12 09:45:02