当前位置：极光网首页 >> 建站教程 >> PHP从MySQL提取数据,通过Ajax在前端页面以表格形式展示

PHP从MySQL提取数据,通过Ajax在前端页面以表格形式展示

发布人员：曦阳SEO 发布时间：2025-08-20 03:40:47 所属分类：建站教程 浏览量：3 原创

最近在学习前后端数据交互，有时间的时候一直在研究如何从数据库读取数据，以及前端如何展示后台数据，今天通过多方搜索找了一些实用的教程，用php读取数据库数据，并在前端用Ajax将数据以表格的形式展示出来，简单整理一个学习笔记，为后续学习提供思路。

PHP从MySQL提取数据,通过Ajax在前端页面以表格形式展示-第1张图片

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

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

<?php//header("Content-type=text/html;charset=utf-8");//header('Content-type:text/JSon');$servername = "localhost";$username = "root";$password = "";$dbname = "student";// 创建连接$conn = new mysqli($servername, $username, $password, $dbname);// Check connectionif ($conn->connect_error) {    die("连接失败: " . $conn->connect_error);} mysqli_query($conn, 'set names utf8');$sql = "SELECT studentID, studentName, class, department,teleNumber FROM studentinfo";$result = $conn->query($sql);if ($result->num_rows > 0) {    // 输出数据    while($row = $result->fetch_assoc()) {        echo json_encode($row,JSON_UNESCAPED_UNICODE).' ';    }} else {    echo "0 结果";}$conn->close();?>

过程中遇到的问题：

（1）PHP从数据库读取的数据中文显示的是”?”，解决方法：

mysqli_query($conn, 'set names utf8')后中文变为Unicode的编码

（2）Unicode的编码改成中文的方法：

json_encode($row,JSON_UNESCAPED_UNICODE).' ';

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

<!DOCTYPE html><html ng-app = 'test'><head>    <meta charset="UTF-8">    <meta http-equiv="Content-type=text/html;charset=utf-8"/>    <!-- jQuery -->    <script type="text/Javascript" src="https://CDN.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>     <!-- Latest compiled and minified CSS -->    <link rel="stylesheet" HRef="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0-beta1/css/bootstrap.min.css">    <style type="text/css">        .table{            width: 1000px;            text-align: center;        }    </style>    <title>学生信息管理</title></head><body ng-controller = 'mAIn'>    <div class="">        <table class="table table-bordered table-striped">            <thead>                <tr>                    <td>学号</td>                    <td>姓名</td>                    <td>班级</td>                    <td>学院</td>                    <td>电话</td>                </tr>            </thead>            <tbody id="tbody"></tbody>        </table>    </div></body><script type="text/javascript">$.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 += '<tr class="example">';            trStr += '<td width="15%">' + JSON.parse(a[i]).studentID + '</td>';            trStr += '<td width="15%">' + JSON.parse(a[i]).studentName + '</td>';            trStr += '<td width="15%">' + JSON.parse(a[i]).class + '</td>';            trStr += '<td>' + JSON.parse(a[i]).department + '</td>';            trStr += '<td>' + JSON.parse(a[i]).teleNumber + '</td>';            trStr += '</tr>';          }         $("#tbody").html(trStr);    }});</script></html>

最终效果如下所示：

PHP从MySQL提取数据,通过Ajax在前端页面以表格形式展示-第2张图片

以上就是PHP从MySQL提取数据,通过Ajax在前端页面以表格形式展示的全部内容了,希望能够帮助到你，找建站教程记得来极光资源网！

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！