【超详细】如何从数据库取出数据，动态填充html
2024-05-12 01:31:39
目录
- 【超详细】如何从数据库取出数据，动态填充html
- step1：Javascript
- step2：php
【超详细】如何从数据库取出数据，动态填充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 xvar itemNode = c('div');itemNode.setAttribute("class", "item");itemNode.setAttribute("id", "item"+item_id);// picvar pic = c('a');pic.setAttribute("class", "item_pic");pic.setAttribute("href", item_url);// imgvar img = c('img');img.setAttribute("src", item_pic);// add childrenpic.appendChild(img);// namevar name = c('a');name.setAttribute("class", "item_name");name.setAttribute("href", item_url);// h1var h1 = c('h1');h1.append(document.createTextNode(item_name));name.appendChild(h1);// buttonsvar buttons = c('div');buttons.setAttribute("class", "item_amount");// adjustvar adjust = c('div');adjust.setAttribute("class", "amount_button");// minusvar minus = c('button');minus.setAttribute("onclick", "minus("+item_id+")");minus.setAttribute("class", "minus");minus.appendChild(document.createTextNode("-"));// amountvar 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");// plusvar plus = c('button');plus.setAttribute("onclick", "plus("+item_id+")");plus.setAttribute("class", "plus");plus.appendChild(document.createTextNode("+"));// add childrenadjust.appendChild(minus);adjust.appendChild(amount);adjust.appendChild(plus);// deletevar del = c('button');del.setAttribute("class", "del_item");del.setAttribute("onclick", "delItem("+item_id+")");del.appendChild(document.createTextNode("Delete"));// add childrenbuttons.appendChild(adjust);buttons.appendChild(del);// pricevar price = c('h3');price.setAttribute("class", "item_price");price.appendChild(document.createTextNode("HK$ "+item_price));// add childrenitemNode.appendChild(pic);itemNode.appendChild(name);itemNode.appendChild(buttons);itemNode.appendChild(price);// add childrenvar hr = c('hr');hr.setAttribute("id", "hr"+item_id);// add childrenvar 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中生成的添加进去）之后再调用。
（点我查看文件中html php 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 onefor ($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 functionecho "<script>addItem(".$id.", '".$url."', '".$pic."', '".$name."', ".$num.", ".$price.");</script>";}$connection->close();
?>
（这段代码被我放在了整个php文件（php和html文件有何区别）末尾。因为此时html正文中那个父节点已被加载完毕，然后再调用js函数即可实现添加html内容。）
End
【超详细】如何从数据库取出数据，动态填充html相关推荐
- oracle怎么将一列挪到另一列,详细讲解Oracle数据库的数据迁移方法
<详细讲解Oracle数据库的数据迁移方法>由会员分享,可在线阅读,更多相关<详细讲解Oracle数据库的数据迁移方法(4页珍藏版)>请在人人文库网上搜索. 1.详细讲解 Or ...
- PHP学习3：如何从数据库取出数据？看【八、实际运用】
目录 一.PHP基础 二.PHP基操 三.预定义变量:系统定义的变量(都是数组) 四.如何定义常量? 五.系统定义了的常量: 六.系统魔术常量: 七.内存: 八.实际运用 ①简单款(没用到数据库的,不 ...
- ORACLE使用copy方式存储迁移,详细讲解Oracle数据库的数据迁移方法
添加所需的表空间和用户到目标数据库中:安装所需的SQL*Net2或者Net8软件,并配置用于连接数据库的别名. 在DOS命令提示符下设置oracle_sid=Oracle7_sid. 以Interna ...
- mysql+sqlyog的超详细完整安装+数据库基础知识
目录 一.安装mysql 下载 解压添加环境变量 创建文件 启动mysql 安装mysql 二.sqlyog安装 sqlyog下载 三 补充 3.1 常用的数据库命令 3.2 基本操作 3.2.1 常 ...
- Linux上Oracle 11g安装步骤图解(超详细图文教程)附带导入数据和新建数据库教程
首先本文采用Docker方式快速在Linux上安装 目录 1.安装Docker容器 (1)登陆服务器,输入命令安装Docker容器 (2)安装完成后运行下列代码如果弹出Docker版本则表示安装成功 ...
- 超详细！搭建本地大数据研发环境（16G内存+CDH）
工欲善其事必先利其器,在经过大量的理论学习以后,需要有一个本地的研发环境来进行练手.已经工作的可以不依赖于公司的环境,在家也可以随意的练习.而自学大数据的同学,也可以进行本地练习,大数据是一门偏实践的 ...
- 字符集_超详细的MySQL数据库字符集总结，值得收藏
概述 MySQL支持多种字符集(character set)提供用户存储数据,同时允许用不同排序规则(collation)做比较.下面基于MySQL5.7介绍一下字符集相关变量的使用. 一.字符集.字 ...
- 【wxcharts】从数据库取数据动态渲染
首先在wxml给出一个canvas <canvas canvas-id="lineCanvas" disable-scroll="true" class= ...
- mysql数据库字符集_超详细的MySQL数据库字符集总结，值得收藏
MySQL支持多种字符集(character set)提供用户存储数据,同时允许用不同排序规则(collation)做比较.下面基于MySQL5.7介绍一下字符集相关变量的使用. 一.字符集.字符序的 ...
最新文章
- Swift学习:基础部分(The Basics)
- JAVA-retry 重试
- 线程共享的环境包括：进程代码段、进程的公有数据(利用这些共享的数据，线程很容易的实现相互之间的通讯)、进程打开的文件描述符、信号的处理器、进程的当前目录和进程用户ID与进程组ID。 进程拥有这
- JS 正则表达式（数字、正则）
- english learning websites
- php module类,总结php artisan module常用命令
- [ACM] hdu 1232 畅通工程（并查集）
- html5进度条插件 传递参数,Html5进度条插件(自写)
- 能用机器完成的，千万别堆工作量|持续集成中的性能自动化测试
- C#LeetCode刷题之#344-反转字符串（Reverse String）
- mysql8 修改密码_Mysql 8新特性之(1):账户与安全更人性化
- 直接内存访问 (Direct Memory Access, DMA)
- 【转载】spring.net 学习系列目录
- 阿里云安装kubernetes-UI报错endpoints \kubernetes-dashboard\ not found解决方法
- 实习成长之路：MySQL二 ： 一条SQL更新语句是如何执行的？
- VMWare 各版本下载地址
- 华为平板解锁工具_它已不再是个娱乐工具 华为平板M6升级版：MatePad 10.8上手图赏...
- 日志管理系统之保存日志到数据库
- IT运营新世界大会：广通软件开启双态运维大时代
- 从今天开始，每天做一件有意义的事，有进步的事