jQuery使用load方法加载文件失败页面空白问题如何解决

存在的错误点 #

• 引入jQuery的<script>标签未闭合，浏览器会将后续自定义脚本内容识别为jQuery库的代码，导致自定义JS完全不执行
• load方法中目标文件路径的字符串缺少右引号，存在明显的JavaScript语法错误，代码运行直接报错
• 若直接通过file://协议本地打开HTML文件，浏览器同源策略会禁止AJAX请求，哪怕目标文件在同级目录也无法加载

修复方案 #

1. 修正代码的语法错误，修正后完整代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 <script type="text/javascript">
   jQuery(document).ready(function(){
       jQuery("#new").load("new.html");
   });
</script>
</head>
<body>
 
<div id="new"></div>
 
</body>
</html>

2. 不要直接双击打开HTML文件运行，需要部署在本地HTTP服务下访问：
   • 可以使用VS Code的Live Server插件右键点击文件选择「Open with Live Server」
   • 也可以在项目目录下执行命令启动临时服务：Python3环境运行python -m http.server 8000，PHP环境运行php -S localhost:8000，之后在浏览器访问http://localhost:8000即可正常加载内容

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