Question

我正在尝试使用jquery在我当前的html文件中加载另一个html文件，但没有显示任何内容。我尝试了其中一个答案here，但我仍然没有看到我的html文件中出现任何内容。

about.html

<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.jquery.com/jquery-2.1.4.js">
    $(function(){
      $("#topbar").load("b.html");
    });
    </script>
  </head>

  <body>
    <div id="topbar"></div>
  </body>
</html>

b.html

<p> This is the included file </p>

我在这里做错了什么？

Answer 1

JS <script> 101：您可以在<script>...</script>块内部使用完全定义的脚本， OR 可以从外部src加载脚本。你不能在一个块中同时拥有它们。如果指定src，则会忽略<script>块的正文。你应该

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script> <-------------------------------------------^^^^^^^^^
$(function(){
  $("#topbar").load("b.html");
});
</script>

请注意</script><script>添加。

Answer 2

试试这个：

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function(){
    $.ajax({
      method: "GET",
      url: "b.html",
      dataType: 'html',
      data: { },
      success: function(data) {
          $("#topbar").html(data);
      }
    })      
});
</script>
</head>

<body>
<div id="topbar"></div>
</body>
</html>

包括单独的html文件不加载

2 个答案: