PHP+MySQL+Ajax实现前端页面展示数据库的数据

您所在的位置:网站首页 PHP获取数据库生成json PHP+MySQL+Ajax实现前端页面展示数据库的数据

PHP+MySQL+Ajax实现前端页面展示数据库的数据

2023-06-30 10:53| 来源: 网络整理| 查看: 265

昨天发现一款数据库管理软件:Navicat for MySQL,一款强大的 MySQL 数据库管理和开发工具,这款软件使用了极好的图形用户界面(GUI),可以用一种安全和更为容易的方式快速和容易地新建数据库、新建表等。前端学习过程中一直对后台如何从数据库读取数据,以及后台提供给前端接口等问题比较感兴趣,借此机会,尝试了一下新建数据库和表,用PHP从建好的数据库中读取数据,并在前端用Ajax将数据展示出来等,做一个记录,为后续学习铺路。

1、使用Navicat for MySQL创建数据库和表

Navicat for MySQL使用起来十分简单,不用像PHP创建数据库和表的时候需要写代码来完成,具体操作此处不再详细介绍,可以参考以下网址进行创建:

Navicat for MySQL的下载、安装与基本使用 Navicat for MySQL使用手记(上)–创建数据库和表

创建好的数据库和表如下图所示: 这里写图片描述

2、使用PHP从 MySQL 数据库读取数据

以下实例中我们从student数据库的studentinfo表读取了studentID,studentName,class,department和 teleNumber列的数据并显示在页面上:

以上代码解析如下: 首先,设置了 SQL 语句从 MyGuests数据表中读取 id, firstname 和 lastname 三个字段。之后我们使用改 SQL 语句从数据库中取出结果集并赋给复制给变量 $result。 函数 num_rows() 判断返回的数据。 如果返回的是多条数据,函数 fetch_assoc() 将结合集放入到关联数组并循环输出。 while() 循环出结果集,并输出 id, firstname 和 lastname 三个字段值。 过程中遇到的问题: (1)PHP从数据库读取的数据中文显示的是”?”,解决方法: mysqli_query($conn, 'set names utf8')后中文变为Unicode的编码 (2)Unicode的编码改成中文的方法: json_encode($row,JSON_UNESCAPED_UNICODE).' ';

3、使用Ajax将数据展示在前端页面

代码如下:

.table{ width: 1000px; text-align: center; } 学生信息管理 学号 姓名 班级 学院 电话 $.ajax({ type: 'POST', url: 'studentInfo.php', data:{ }, success: function (data) { //console.log(data); var a = data.split(' '); //console.log(a); var trStr = '';//动态拼接table for (var i = 0; i < a.length-1; i++) { trStr += ''; trStr += '' + JSON.parse(a[i]).studentID + ''; trStr += '' + JSON.parse(a[i]).studentName + ''; trStr += '' + JSON.parse(a[i]).class + ''; trStr += '' + JSON.parse(a[i]).department + ''; trStr += '' + JSON.parse(a[i]).teleNumber + ''; trStr += ''; } $("#tbody").html(trStr); } });

最终实现效果: 这里写图片描述

以上内容仅仅作为前端、后台和数据库进行连接的演示,谈不上前后台数据交互,还有很多内容需要扩展,比如数据的增删改等操作,后续空闲之余可以自娱自乐一下。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3