【超详细】如何从数据库取出数据，动态填充html
step1：Javascript
首先你需要写一个javascript片段，用于生成html节点并填充到html正文中已存在的某个节点中。
如果要添加这样一段html代码：
<div class='items'>
<!-- A item Demo -->
<div class="item" id="item1">
<!-- pic -->
<a class="item_pic" href="#">
<img src="img/iphone12.jpg">
</a>
<!-- name -->
<a href="#" class="item_name"><h1>iPhone 12 256G (1990 Classic)</h1></a>
<!-- buttons -->
<div class="item_amount">
<!-- adjust -->
<div class="amount_button">
<!-- minus -->
<button onclick="minus(1)" class="minus">-</button>
<!-- amount -->
<input type='text' id="amount1" class="amount" value="6" readonly="readonly">
<!-- plus -->
<button onclick="plus(1)" class="plus">+</button>
</div>
<!-- delete -->
<button class="del_item" onclick="delItem(1)">Delete</button>
</div>
<!-- price -->
<h3 class="item_price">HK$ 0.01</h3>
</div>
<!-- split line -->
<hr id="hr1">
</div>
可以用这样一个js脚本实现（源代码中这段js被我添加在<head>中的<script>里）：
// the item_id is not the one in database, but the No.id item displayed on website
function addItem(item_id, item_url, item_pic, item_name, item_num, item_price) {
// item x
var itemNode = c('div');
itemNode.setAttribute("class", "item");
itemNode.setAttribute("id", "item"+item_id);
// pic
var pic = c('a');
pic.setAttribute("class", "item_pic");
pic.setAttribute("href", item_url);
// img
var img = c('img');
img.setAttribute("src", item_pic);
// add children
pic.appendChild(img);
// name
var name = c('a');
name.setAttribute("class", "item_name");
name.setAttribute("href", item_url);
// h1
var h1 = c('h1');
h1.append(document.createTextNode(item_name));
name.appendChild(h1);
// buttons
var buttons = c('div');
buttons.setAttribute("class", "item_amount");
// adjust
var adjust = c('div');
adjust.setAttribute("class", "amount_button");
// minus
var minus = c('button');
minus.setAttribute("onclick", "minus("+item_id+")");
minus.setAttribute("class", "minus");
minus.appendChild(document.createTextNode("-"));
// amount
var amount = c('input');
amount.setAttribute("class", "amount");
amount.setAttribute("type", "text");
amount.setAttribute("id", "amount"+item_id);
amount.setAttribute("value", item_num);
amount.setAttribute("readonly", "readonly");
// plus
var plus = c('button');
plus.setAttribute("onclick", "plus("+item_id+")");
plus.setAttribute("class", "plus");
plus.appendChild(document.createTextNode("+"));
// add children
adjust.appendChild(minus);
adjust.appendChild(amount);
adjust.appendChild(plus);
// delete
var del = c('button');
del.setAttribute("class", "del_item");
del.setAttribute("onclick", "delItem("+item_id+")");
del.appendChild(document.createTextNode("Delete"));
// add children
buttons.appendChild(adjust);
buttons.appendChild(del);
// price
var price = c('h3');
price.setAttribute("class", "item_price");
price.appendChild(document.createTextNode("HK$ "+item_price));
// add children
itemNode.appendChild(pic);
itemNode.appendChild(name);
itemNode.appendChild(buttons);
itemNode.appendChild(price);
// add children
var hr = c('hr');
hr.setAttribute("id", "hr"+item_id);
// add children
var parent = document.getElementsByClassName("items")[0];
parent.appendChild(itemNode);
parent.appendChild(hr);
}
function plus(id) {
var amountId = 'amount' + id;
var e = document.getElementById(amountId);
var value = e.value;
var reg = /^[1-9]+[0-9]*]*$/;
if (!reg.test(value)) return;
else value = value - '0' + 1;
if (value == '0') delItem(id);
e.setAttribute("value", value);
}
function minus(id) {
var amountId = 'amount' + id;
var e = document.getElementById(amountId);
var value = e.value;
var reg = /^[1-9]+[0-9]*]*$/;
if (!reg.test(value)) return;
else value = value - '0' - 1;
if (value == '0') delItem(id);
e.setAttribute("value", value);
}
function delNode(e) {
if (e != null) e.parentNode.removeChild(e);}
function delItem(id) {
alert("You just delete an item. Checkout to save the changes.");
var amountId = 'item' + id;
delNode(document.getElementById(amountId));
var hrid = 'hr' + id;
delNode(document.getElementById(hrid));
}
需要注意的是，js添加html节点的代码需要在html正文加载完毕（正文需要先加载出那个父节点，才能将js中生成的添加进去）之后再调用。
step2：php
写一个php代码段，可以从数据库取完数据再调用js代码；也可循环取数据，一边取一边调用js函数，这就实现了动态添加html。
<?php
{
$serverName = "127.0.0.1"; // localserver ip
$userName = "root"; // user name
$password = "Your password"; // password
$dbname = "cart"; // table name in database
$connection = new mysqli($serverName, $userName, $password, $dbname);
if (!$connection->connect_error) {
// echo "Connection success<br>";
} else {
die("Connection failed: ". $connection->connect_error. "<br>");
}
}
// get user_id
$user_id = 1;
// get item ids
$item_ids = array();
$sqlstat = "SELECT item_id FROM cart WHERE user_id=". $user_id;
$result = $connection->query($sqlstat);
while ($row = $result->fetch_assoc()) {
array_push($item_ids, $row['item_id']);
}
// get item numbers
$item_nums = array();
$sqlstat = "SELECT item_num FROM cart WHERE user_id=". $user_id;
$result = $connection->query($sqlstat);
while ($row = $result->fetch_assoc()) {
array_push($item_nums, $row['item_num']);
}
// add items one by one
for ($i = 0; $i < count($item_ids); ++$i) {
$id = $item_ids[$i];
$url = '#';
$sqlstat = "SELECT img_path FROM items WHERE id=".$id;
$pic = $connection->query($sqlstat)->fetch_assoc()['img_path'];
$sqlstat = "SELECT name FROM items WHERE id=".$id;
$name = $connection->query($sqlstat)->fetch_assoc()['name'];
$num = $item_nums[$i];
$sqlstat = "SELECT price FROM items WHERE id=".$id;
$price = $connection->query($sqlstat)->fetch_assoc()['price'];
// call js function
echo "<script>addItem(".$id.", '".$url."', '".$pic."', '".$name."', ".$num.", ".$price.");</script>";
}
$connection->close();
?>
（这段代码被我放在了整个php文件（php和html文件有何区别）末尾。因为此时html正文中那个父节点已被加载完毕，然后再调用js函数即可实现添加html内容。）
End