使用jQuery .load()复制外部HTML表格内容失败求助

嗨，我看了你的代码，核心思路没问题，但没加载出表格大概率是几个常见坑导致的，咱们一步步来排查：

最可能的原因：脚本标签写法错误 #

你把jQuery的引入和自定义脚本写在同一个<script>标签里了！当<script>标签带有src属性时，标签内部的代码会被浏览器忽略，这就导致你的.load()代码根本没执行。赶紧改成这样：

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $( "#results" ).load( "/Otherpage/Report2.html #TestcasesTable" );
  });
</script>

其他需要排查的点 #

• 路径是否正确：直接在浏览器地址栏输入/Otherpage/Report2.html，看看能不能打开目标页面。如果是本地文件，可能需要用相对路径（比如./Otherpage/Report2.html），绝对路径得匹配服务器的根目录结构。
• 跨域限制：如果你的页面和Report2.html不在同一域名、端口或协议下（比如本地用file://打开页面加载另一个本地文件），浏览器的同源策略会拦截请求。解决办法是把文件放到本地服务器（比如XAMPP），用http://localhost开头的地址访问。
• 目标选择器是否准确：打开Report2.html的源代码，确认#TestcasesTable这个ID确实存在，没有拼写错误（ID区分大小写哦）。
• 查看控制台错误：按F12打开开发者工具，切换到Console标签，看看有没有404（路径错了）、跨域、jQuery未定义这类报错，这些信息能直接定位问题。

先把脚本拆分的问题解决，这是最容易踩的坑，之后再排查其他点，应该就能顺利加载表格啦。

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