使用 mysql 数据填充 HTML 模板并使用 Javasript 将项目附加到视图答案

【问题标题】：Fill an HTML template with mysql data and append the item to the view with Javasript使用 mysql 数据填充 HTML 模板并使用 Javasript 将项目附加到视图
【发布时间】：2021-09-06 20:37:38
【问题描述】：

我正在努力解决一个问题。我需要为网站制作一个关于我们的页面。我为页面使用模板，我想用 MySQL 数据填充模板。我在personcard的整个<div>周围使用<script>标签。当我这样做时页面是空的。这是我的 HTML 代码：

<script type="text/html" id="aboutUsTemplate">
<div class="container" id="aboutUsTemplateCard">
    <div class="row">
        <!-- Team Member 1 -->
        <div class="col-xl-6 col-md-6 mb-4">
            <div class="card border-0 shadow">
                <img id="personPicture" src="https://source.unsplash.com/TMgQMXoglsM/500x350" class="card-img-top" alt="">
                <div class="card-body text-center">
                    <h5 id="personName" class="card-title mb-0">Team Member</h5>
                    <div id="personJob" class="card-text text-black-50">Web Developer</div>
                </div>
            </div>
        </div>
    </div>
</div>
</script>



<div id="personLocation">

</div>

我想将卡片添加到充满 MySQL 数据的视图中，这是我的 javascript 代码：

addPerson(aboutUsView, personData) {
        const scriptTagAboutUsTemplate = $("#aboutUsTemplate", aboutUsView);
        const aboutUsTemplateTarget = $("#personLocation", aboutUsView);

        for (let i = 0; i < personData.length; i++) {
            const aboutUsTemplate = $(scriptTagAboutUsTemplate[0].text);
            const person = personData[i];


            aboutUsTemplate.find("#personName").text(person.name);
            aboutUsTemplate.find("#personJob").text(person.job);
            aboutUsTemplate.find("#personPicture").attr("src", person.picture);


            aboutUsTemplateTarget.append(aboutUsTemplate);
        }
    }

我正在努力解决的一个问题是在 javascript 行中：

const aboutUsTemplate = $(scriptTagAboutUsTemplate[0].text);

被读取为未定义，因此不会加载整个页面。有谁知道我的问题是什么？

【问题讨论】：

除非有什么改变（这是可能的）
你可以编写 javascript 来发出可以工作的 html

标签： javascript html mysql express

【解决方案1】：

您需要创建一个模板类，将您的 HTML 传递给它，并用数据库中的数据填充变量。仔细阅读我的示例以了解如何操作。

class EmailTemplate
{

    protected $_file;

    protected $_data = array();

    public function __construct($file = null)
    {
        $this->_file = $file;
    }

    public function set($key, $value)
    {
        $this->_data[$key] = $value;
        return $this;
    }

    public function render()
    {
        extract($this->_data);
        ob_start();
        include ($this->_file);
        return ob_get_clean();
    }
}

// get $token from database
$template = new EmailTemplate('email-confirmation.php');
$template->set('id', $token);
$html = $template->render();

// echo $html or use it anywhere you want

email-confirmation.php 如下所示：

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Email Confirmation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
  </head>
  <body style="background-color: #b8d6f4;">
  ....
  ....
 <td>
    <a href="https://www.your.site/user-verify.php?id=<?php echo $id; ?>">Confirm Account</a>
 </td>
  ....
  ....


  </body>
</html>

你必须用你的 HTML 模板替换 email-confirmation 并设置你想要的值并在你调用它时从数据库中填充它。

【讨论】：