如何使用AJAX和JQUERY实现点击链接在指定div中加载HTML页面内容

前置依赖 #

首先在页面</body>标签前引入jQuery库：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

完整功能代码 #

引入jQuery后添加如下JS代码即可实现需求：

// 等待DOM加载完成后执行
$(document).ready(function() {
  // 绑定所有导航链接的点击事件
  $('.nav_links a').on('click', function (e) {
    // 阻止默认的锚点跳转行为
    e.preventDefault();
    // 从链接id中提取页面对应名称，去除末尾的link标识
    const pageKey = $(this).attr('id').replace(/link$/i, '');
    // 调用jQuery的load方法（封装好的AJAX方法）加载对应html内容
    $('#main_container').load(`${pageKey}.html`, function (res, status, xhr) {
      // 加载失败时的提示处理
      if (status === 'error') {
        $(this).html(`<p>加载出错，错误码：${xhr.status}，错误信息：${xhr.statusText}</p>`);
      }
    });
  });

  // --- 可选：页面首次打开默认加载home页，取消注释即可生效 ---
  // $('#homelink').trigger('click');
});

逻辑说明 #

• 自动匹配导航链接id和页面名称，不需要为每个链接单独写事件绑定，后续新增导航只需保持页面名+link的id命名规则即可自动适配
• 内置加载失败的错误提示，方便开发阶段排查文件路径、文件存在性等问题
• 注意：请确保项目根目录/当前页面同级目录下存在home.html、about.html、location.html三个对应页面文件

内容的提问来源于stack exchange，提问作者Ricardo Jacobsen