关于jQuery load方法的疑问:本地文件q.txt内容无法加载至class为content的div的原因咨询
我来帮你分析下为什么q.txt的内容加载不到.content的div里,常见的几个原因和解决思路如下:
本地文件协议的安全限制
如果你是直接双击HTML文件用浏览器打开(此时地址栏是file://开头),绝大多数现代浏览器会出于安全考虑,阻止AJAX请求加载本地文件——而jQuery的load()方法本质就是发起AJAX请求。这是最常见的问题。
解决办法:把你的HTML和q.txt放到本地服务器环境里运行,比如用Python的python -m http.server(Python3),或者XAMPP/WAMP这类工具,通过http://localhost开头的地址访问页面。文件路径错误
检查q.txt是否和你的HTML文件在同一个目录下。如果不在,要写对相对路径:比如q.txt在data子文件夹里,就要写成$(".content").load("data/q.txt");。
你可以打开浏览器控制台(按F12),切换到Network标签,刷新页面看有没有q.txt的请求,如果状态码是404,那就是路径不对找不到文件。元素选择器的潜在问题
虽然你的代码里选择器.content和div的class是匹配的,但可以确认下:页面加载完成时这个元素是否已经存在?不过你用了$(document).ready(),这个问题应该不存在,但如果是动态生成的元素另说——不过你的代码里是静态的div,所以这条可能性很低。文件权限问题
极少数情况下,本地的q.txt文件可能没有被浏览器读取的权限,比如在Linux/Mac系统里文件权限设置为只读且不属于当前用户组。可以检查下文件的权限设置,确保有读权限。
最后给个小调试技巧:在load()方法里加个回调函数,看看有没有错误信息:
$(".content").load("q.txt", function(response, status, xhr) { if (status == "error") { console.log("加载出错: " + xhr.status + " " + xhr.statusText); } });
这样能在控制台直接看到错误原因,方便排查。
内容的提问来源于stack exchange,提问作者HelloWorld

