jQuery/AJAX新手求助：页面加载时自动加载Div内容却反复刷新

嘿，我来帮你拆解下问题所在，以及怎么修复：

首先，你的代码里有两个关键问题：

• $(function loadBlog(e) {...}) 这种写法里，DOM就绪回调函数的参数不是事件对象e，所以e是undefined，调用e.preventDefault()不仅没用，还会在控制台抛出错误（你可以打开浏览器开发者工具的Console标签看看）。而且DOM就绪事件本身也没有需要阻止的默认行为，所以这段代码完全是多余的。
• 页面无限循环刷新的核心原因，大概率是你加载的 /blog/page1.html 里包含了同样的这段加载脚本！也就是说：主页面加载完执行脚本，把page1的内容插入到#blogcontentloaded里；而page1里的脚本又会再次执行$('#blogcontentloaded').load('/blog/page1.html')，这样就陷入了无限加载循环，看起来像是页面在反复刷新。

接下来是修复方案：

1. 修正主页面的加载脚本 #

把代码改成最简洁的DOM就绪写法，不需要多余的参数和阻止默认行为：

$(function() {
  // DOM加载完成后，自动加载内容到目标容器
  $('#blogcontentloaded').load('/blog/page1.html');
});

2. 确保加载的内容是纯片段 #

重点检查 /blog/page1.html 的内容：

• 它应该只包含你想插入的纯内容片段（比如博客文章的HTML、文字等），不要有完整的HTML结构（比如<html>、<head>、<body>标签）。
• 绝对不要在page1里重复引入jQuery，或者重复写这段自动加载的脚本！

3. 可选：加个判断避免重复执行 #

如果因为某些原因，你必须在page1里保留脚本，可以给主页面的<body>加一个标识类，比如<body class="main-blog-page">，然后在脚本里判断只有主页面才执行加载逻辑：

$(function() {
  // 只有主页面才执行自动加载
  if ($('body').hasClass('main-blog-page')) {
    $('#blogcontentloaded').load('/blog/page1.html');
  }
});

这样就能彻底解决无限循环加载的问题啦～

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