Javascript 如何从数据库中获取数据以使用PHP/jQuery进行渲染

背景： 目前，我有一个静态时间线html/css/jQuery。我想更进一步，所以我制作了一个单独的管理页面，允许用户输入他们想要的信息，并在正确的日期（在数据库中保存为日期）在时间线上显示图片

我不知道如何生成时间线，以便它显示来自数据库的条目，而不是html页面中的静态时间线加载程序。换句话说，它会提取标题、描述、日期和上传的图像

我的想法是使用foreach循环来回显标签中已经存在的变量。例如：

<div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
            <a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
            <img src="$image" alt=""/>
            </a>
            <h2>'$date'</h2>
            <span><?php echo '$about' ?> </span>
            <div class="read_more" data-id="12/05/2012">Read more</div>

加载时间轴的页面：

<div class="timelineLoader">
    <img src="images/timeline/loadingAnimation.gif" />
</div>
<!-- BEGIN TIMELINE -->
<div class="timelineFlat tl1">
        <div class="item" data-id="04/05/2014" data-description="Lorem ipsum">
            <a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/1.jpg" rel="lightbox[timeline]">
            <img src="images/videoConferencingnodevices.jpg" width="410" height"275" alt=""/>  



            </a>
            <h2>MAY, 4</h2>
            <span>Example</br>
                Example  
        </span>
            <div class="read_more" data-id="04/05/2014">Read more</div>
        </div>
        <div class="item_open" data-id="04/05/2014" data-access="ajax-content-no-image.html">
            <div class="item_open_content">
                <img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
            </div>
        </div>

        <div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
            <a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
            <img src="images/collabcompliant.jpg" alt=""/>
            </a>
            <h2>MAY, 12</h2>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerc...</span>
            <div class="read_more" data-id="12/05/2012">Read more</div>
        </div>
        <div class="item_open" data-id="12/05/2012" data-access="ajax-content-no-image.html">
            <div class="item_open_content">
                <img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
            </div>
        </div>  

5月4日
范例

例子
阅读更多
5月12日
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个非常简单的例子，它是一个很好的例子。。。
阅读更多

---

有谁能帮助我实现这一结果，并从数据库中获取要生成的数据吗？

如果您使用的是时间线插件，您应该提到哪一个，它可能已经有了一个类似于服务器端处理选项的API我买了一个：我看不到任何API选项您的评论

我的想法是使用foreach循环来回显已经存在的标记中的变量。

非常合适，除了我会立即运行循环生成整个时间线。你试过了吗？那怎么办？它不起作用了？您没有显示如何从数据库中获取数据，因此很难在此基础上进行扩展

<div class="timelineLoader">
    <img src="images/timeline/loadingAnimation.gif" />
</div>
<!-- BEGIN TIMELINE -->
<div class="timelineFlat tl1">
        <div class="item" data-id="04/05/2014" data-description="Lorem ipsum">
            <a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/1.jpg" rel="lightbox[timeline]">
            <img src="images/videoConferencingnodevices.jpg" width="410" height"275" alt=""/>  



            </a>
            <h2>MAY, 4</h2>
            <span>Example</br>
                Example  
        </span>
            <div class="read_more" data-id="04/05/2014">Read more</div>
        </div>
        <div class="item_open" data-id="04/05/2014" data-access="ajax-content-no-image.html">
            <div class="item_open_content">
                <img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
            </div>
        </div>

        <div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
            <a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
            <img src="images/collabcompliant.jpg" alt=""/>
            </a>
            <h2>MAY, 12</h2>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerc...</span>
            <div class="read_more" data-id="12/05/2012">Read more</div>
        </div>
        <div class="item_open" data-id="12/05/2012" data-access="ajax-content-no-image.html">
            <div class="item_open_content">
                <img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
            </div>
        </div>