显示使用 PHP/Ajax/Jquery 根据内容格式化的动态帖子

我正在研究一个评论/内容/发布系统，遇到了一个岔路口，所以我想在选择路径之前我应该征求其他意见。 抱歉，但目前我没有足够好的工作示例来呈现（或者我可以分享的示例），所以希望我的描述就足够了。

我有一个索引.php主页，它调用 loadmore.php 请求用户帖子显示在div 中。 loadmore.php从MySQL数据库获取这些数据。

每个帖子可以是不同的类型，并且在屏幕上显示时会有所不同。

示例（所有帖子都显示发帖的用户和顶部的日期）：

• 发布：常规帖子，仅文本。
链接
• ：将链接页面的标题显示为超链接，旁边的小缩略图以及下面从链接站点中提取的文本片段。
图片
• ：显示大图片，下方带有标题。
视频
• ：在顶部显示标题，标题下的视频占div 宽度的一半，视频说明位于视频旁边。

不要关心格式等，我只是想表明每个帖子将根据帖子类型进行不同的格式，并且 HTML 可能会很长。

现在，这就是我想知道的; 生成或选择的HTML应该来自哪里？ （为简单起见，我使用的是伪代码）

选项 1. 我可以在索引.php页面上使用ajax/js中的各种HTML"模板"，并使用一堆IF语句填充变量，但我不确定这应该在索引文件中。

索引.php

    <div id="mainContainer">
    //Content
    <div id="postsContainer">
        //Individual posts go in here (Several divs formatted according to content)
    </div>
    //More content
    </div>
    <script>
     GET data to loadmore.php and get results into variables
     IF "type" is "link" 
         append to #postsContainer "<div id="linkURL"....$variables etc...
     IF "type" is "video" 
         append to #postsContainer "<div id="videoDiv"....$variables
     //And so on...
    </script>

加载更多.php

    <?PHP
    //Get and process post data into variables
    //Query SQL database for more/new posts
    //Return individual data in JSON format to index.php
    ?>

选项 2. 或者，我可以让 loadmore.php IF 语句来返回要在 index.php 中前缀的适当 HTML 字符串，但我发现当只能传递变量时，在 2 个 PHP 文件服务器端传递这么多长 HTML 字符串是低效的。

索引.php（注意：只有脚本部分不同）

    <div id="mainContainer">
    //Content
    <div id="postsContainer">
        //Individual posts go in here (Several divs formatted according to content)
    </div>
    //More content
    </div>
    <script>
     //GET data to loadmore.php and get resulting HTML string
     //Append to #postsContainer the HTML string returned from loadmore.php
    </script>

加载更多.php

    <?PHP
    //Get and process post data into variables
    //Query SQL database for more/new posts
    IF "type" is "link" 
         $returnHTML = "<div id="linkURL....$variables etc...
    IF "type" is "video" 
         $returnHTML = "<div id="videoDiv....$variables
    //And so on...
    return $returnHTML; 
    //This is a single long string returned with all HTML formatted by loadmore.php
    //index.php simply has to Append the entire string into the div
    ?>

最好的路线是哪条？ 为什么呢？

对不起，如果看起来很乱，我仍然习惯这个网站的格式化方法......

<?php
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
//...
$result = $mysqli->query($query);
while ($row = $result->fetch_array(MYSQL_ASSOC)) {
  $count += 1;
  echo '<div id="post'.$count.'">';
  switch ($row['type']) {
    case 'POST':
      //POST format
      break;
    case 'LINK':
      //LINK format
      break;
    case 'PICTURE':
      //PICTURE format
      break;
    //...
    default:
      //default
  }
  echo '</div';
}
$result->free();
$mysqli->close();
?>

<script typ="text/javascript">
    $(document).ready(function(){
         $("#postsContainer").load("loadmore.php");
    });
</script>

var variables = $("#form").serialize();
$.post("loadmore.php", variables, function(data) {
    $("#postsContainer").html(data);
});