如何通过jQuery将本地JSP文件内容注入另一JSP的Div中？

嘿，我完全懂你这会儿的困扰——在同一个项目的JSP之间用jQuery加载内容，要么load()没反应，要么用<script type="html">不知道怎么把内容导到div里。我来给你捋几个实用的方案，都是实际开发中验证过的：

方案一：修复load()方法的问题，让AJAX加载生效 #

你之前用$("#id").load("file2.jsp")没生效，大概率是路径不对或者执行时机有问题，先把这两个坑填上：

1. 确保jQuery正确加载
   先检查页面里有没有引入jQuery，而且要在你的自定义脚本之前加载，比如：

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <!-- 或者用你项目里的本地jQuery文件 -->
   

   可以打开浏览器控制台，输入$回车，如果返回函数说明加载成功，否则就是jQuery没引入对。

2. 写对路径
   路径要相对于当前JSP的访问URL来写：

   • 如果file2.jsp和当前JSP在同一个webapp/views目录下，直接写文件名就行：

     $("#targetDiv").load("file2.jsp");
     

   • 如果当前JSP的URL是http://localhost:8080/你的项目名/views/page1.jsp，也可以用绝对路径（避免相对路径的坑）：

     $("#targetDiv").load("${pageContext.request.contextPath}/views/file2.jsp");
     

     这里${pageContext.request.contextPath}是JSP自带的获取项目根路径的变量，能帮你避免部署时的路径问题。

3. 放在页面加载完成后执行
   一定要把代码包在$(document).ready()里，确保DOM加载完再操作：

   $(document).ready(function() {
     $("#targetDiv").load("file2.jsp");
   });
   

如果还是没反应，打开浏览器的「网络」面板，看看请求file2.jsp的时候有没有返回404——如果有，说明路径绝对错了，得调整；如果返回200但内容不对，那可能是file2.jsp本身的代码有问题。

方案二：用服务器端包含+<script type="html">实现静态注入 #

如果不需要动态加载（比如每次打开页面都要显示file2.jsp的内容），可以用服务器端包含把内容先嵌到当前页面，再用jQuery放到div里：

1. 在当前JSP里加一个<script type="html">标签，用<%@ include %>把file2.jsp的内容嵌进去：

   <script type="text/html" id="file2Template">
     <%@ include file="file2.jsp" %>
   </script>
   

   这里的<%@ include %>是服务器端指令，会在JSP编译的时候就把file2.jsp的内容合并到当前页面里，不会发AJAX请求。

2. 然后用jQuery把这个script标签里的HTML内容放到目标div里：

   <div id="targetDiv"></div>
   
   <script>
   $(document).ready(function() {
     $("#targetDiv").html($("#file2Template").html());
   });
   </script>
   

这个方法的好处是不用考虑AJAX的路径问题，适合静态复用的场景；缺点是内容是页面加载时就固定的，没法动态刷新。

两种方案怎么选？ #

• 如果需要按需加载（比如点击按钮再加载内容），或者需要动态刷新，选方案一的load()方法；
• 如果内容是固定不变的，页面加载时就要显示，选方案二的服务器端包含方式。

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