将数据动态显示到我的 html 页面，其中数据来自我创建的 API

Question

这是我在服务器端使用 Node JS 创建的 get API

app.get('/tasks/tasks', (req, res) => {
connection.query('SELECT * FROM tasks', function (err, result) {
if (err) throw err;
res.status(200).send({ success: true, results: result });
});
});

现在这是我的HTML部分，我想在其中显示其中的所有数据

<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks</h3>
<ul class="list-items" id="parent_1">
<form action="/tasks" method="POST">
<li id="editableLi">
<input name="card_name" type="text" id="textboxId" class="input_style" />
</li>
</form>
<form action="/tasks" method="POST">
<li id="editableLi">
<input name="card_name" type="text" id="textboxId" class="input_style" />
</li>
</form>
<form action="/tasks" method="POST">
<li id="editableLi">
<input name="card_name" type="text" id="textboxId" class="input_style" /> </li>
</form>
</ul>
<button class="add-card-btn btn" onclick="createEditableLi('parent_1')">Add a card</button>
</div>

我想将我的数据放在输入标签中，或者创建一个新的

来显示数据

Answer 1

如果你想向html显示动态数据，有一个简单的方法，

var dynamicElement = '<div>Or Other tag then '+results.Something or result[0].something +'
<h1>'+result.something or result[1].something+'
';

然后将该动态元素与静态 html 标记一起附加

$('#youId').append(dynamicElement)