Question

我试图从Jquery-ajax调用调用一个jsp文件。但是，我只能获得纯HTML。加载html时没有加载任何css文件和js文件。所以html页面即将发布样式表。

此处，示例代码已更新

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<html>
 <head>
 <title>Welcome</title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 </head>
 <script type="text/javascript" src="js/Global/jquery-1.4.2.js"></script>
 <script type="text/javascript">
  function ajaxJq()
  {
   $.get('test.jsp', function(data) 
         {
            $('#myDiv').html(data);
            alert('Load was performed.');
         });
  }
 </script>
 <body>
  <div id="myDiv"></div>
  <div id="error"></div>
  <button id ="buttonAjax" type="button" onclick="ajaxJq()">Ajax Call</button>
 </body>
</html>

test.jsp包含js文件和css文件。如果我看到了，test.jsp加载f

Answer 1

使用AJAX加载内容时，返回的内容应该只是一个HTML片段。

如果您加载完整的HTML文档并将其放入页面，则生成的HTML代码无效，因为文档不能位于其他文档中。不同的浏览器在无效代码上的行为略有不同，但没有浏览器会加载css文件并仅将它们应用于加载的内容。

如果要加载完整的HTML文档，则应使用iframe而不是使用AJAX加载内容。

Answer 2

这是预期的行为。当您尝试将整个HTML页面加载到现有页面元素（如DIV）时，大多数浏览器将删除脚本，样式表和任何其他元内容（如标题）。样式的可能解决方法是：

在主页中包含其他CSS文件
在检索到的页面中使用内联样式

Answer 3

您需要手动完成工作。

function ajaxJq() {
    $.get('test.jsp', function(data) {
         var $html = $(data);

         $html.find('script').each(function(i,e){
             $('head').append(e);
         });
         $html.find('link').each(function(i,e){
             $('head').append(e);
         });

         $('#myDiv').html($html.find('body').contents());

         alert('Load was performed.');
    });
}

但总的来说，这可能不是一个好方法。使用iframe可能会更高效，因为您无法将另一个<html>或<head>标记加载到另一个页面/ DOM中。

如何调用js文件而不是在ajax调用的情况下加载html

3 个答案: