Question

所以我试图使用HTML和jQuery AJAX创建一个模板。我遇到的问题是HTML在收到我的结束标签之前会自动关闭标签，因此它会影响我的格式，我需要了解更多有关此信息的信息或更好的方法来执行此操作

JavaScript

$.post( "https://url.com/header.php", function(data){
    $( "#header" ).after(data);
});

$.post( "https://url.com/footer.php", function(data){
    $( "#footer" ).before(data);
});

这是我从服务器

中提取的#header文件中的开始标记

<div class='container-fixed'>

这是关闭我从服务器提取的#footer文件的标签

</div>

我的home.html文件是我的＃header，＃footer

的模板页面

<header id='header'></header>

<div>HELLO WORLD</div>

<footer id='header'></footer>

这就是我希望我的最终代码在页眉和页脚已加载

之后的样子

<div class='container-fixed'>

<div>HELLO WORLD</div>

</div>

但这就是实际发生的事情

<div class='container-fixed'>
</div>

<div>HELLO WORLD</div>

浏览器没有将我的代码包装在容器文件中，它只是自己关闭我的容器div而不是只删除页脚文件中的结束标记。我的代码比我在这个例子中使用的代码更复杂，但我只是想保持简单;我知道我可以将容器div添加到我的home.html，但这不是我想要做的。任何解决方法？谢谢

我的问题是如何在1个文件中发送和取消关闭标记，而在没有浏览器为我做的情况下将其关闭。

Answer 1

在多个文件中传播开始和结束标记是一件麻烦（而不是一个好习惯）。即使您希望为每个标题，内容和页脚分别创建文件，也要创建一个基本模板文件，其中包含这三个（或更多，如果需要）文件，并且每个文件都有自己的整齐和完整的代码，每个文件都打开并且在自己内部关闭自己的标签。这使得开发，维护和扩展的生活更加轻松。

以下是基本模板文件的示例布局：

<html>
  <head>
     <!-- include HEAD file here (meta tags, styles, js/css files etc.) -->
  </head>
  <body>
     <div id="container">
         <header>
             <!-- include/display HEADER file here -->
         </header>

         <nav>
             <!-- include/display NAV/MENU file here -->
         </nav>

         <div id="content">
             <!-- include/display CONTENT here -->
         </div>

         <footer>
             <!-- include FOOTER file here -->
         </footer>
     </div>
  </body>
</html>

您可以根据自己的要求添加或删除单个模块（文件）。

在我看来，这种方法最适合您，因为您尝试通过ajax构建模板，因此您可以轻松地将所有文件分开，然后在需要时将它们包含在内。您也可以默认包含一些文件（在页面加载时），并通过ajax动态包含其他文件。希望你明白这一点。

使用ajax构建模板

1 个答案: