使用Ajax load方法加载文件异常：回调触发但内容不显示且报404

嘿，既然成功弹出了alert("Success")，说明AJAX请求确实成功完成了（HTTP状态码200），那问题大概率出在内容本身、页面样式或者路径写法上，咱们一步步来排查：

1. 先确认sometext.txt真的有内容 #

这是最容易踩的坑！打开你的sometext.txt文件，看看里面是不是真的写了东西——有时候可能不小心保存了空文件，或者编辑后忘了保存。

2. 检查#testdiv的样式是否把内容藏起来了 #

按下F12打开浏览器开发者工具，找到#testdiv元素，看看这些细节：

• 它的display属性是不是none？
• 有没有设置visibility: hidden或者opacity: 0？
• 是不是被其他元素完全覆盖了（比如z-index太低，或者父容器被隐藏）？
• 它的宽高是不是被设为0了？如果是，哪怕内容插进去也看不到。

3. 看看AJAX实际返回了什么内容 #

在开发者工具的「网络」标签里，找到加载sometext.txt的请求，点开「响应」面板，看看服务器返回的内容到底是什么——偶尔会遇到文件编码问题（比如带UTF-8 BOM），或者内容里有特殊字符，但这种情况比较少见。

4. 关于绝对路径404的问题 #

这里得分两种情况：

• 如果是本地直接双击打开HTML文件（用file://协议）：绝对路径不能写http://localhost/...，除非你先启动了本地服务器（比如用python -m http.server、XAMPP这类工具）。本地文件的绝对路径应该是类似file:///C:/你的文件夹/sometext.txt（Windows）或者file:///Users/你的用户名/你的文件夹/sometext.txt（Mac），但这种写法兼容性差，还是推荐用相对路径。
• 如果是在服务器环境下：绝对路径要从服务器根目录开始，比如你的网站根目录是htdocs，sometext.txt就在htdocs里，那绝对路径应该是/sometext.txt，而不是你本地电脑的磁盘路径。

5. 有没有其他代码干扰？ #

检查一下页面里有没有其他JS代码，会不会在load的回调执行之后，又把#testdiv的内容清空了？比如有没有$("#testdiv").empty()或者其他修改DOM的操作，刚插入的内容又被删掉了。

另外，你可以临时修改代码，把返回的内容打印到控制台，确认是不是真的拿到了数据：

$(function(){ 
  $("#testdiv").load("sometext.txt", function(response, status, xhr){ 
    alert("Success"); 
    console.log("返回的内容:", response); // 控制台查看返回内容
    console.log("请求状态:", status);
  }); 
});

按下F12打开控制台，看看打印的内容，这能帮你快速定位问题。

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