PHP 和 AJAX MySQL实现前后端交互通信实例-获取学员信息

案例效果为：当点击获取学院信息按钮时，无刷新页面，数据库中的数据会渲染到页面上。

实例解释（数据库）：

此时数据库中有五条数据

页面解释（html）：

简单的表单样式，有一个获取所有学员信息的按钮：
当点击了获取所有学员信息时候，页面上会变成：

话不多说上代码：

html部分为：

<div class="container">
        <div class="panel panel-success">
            <div id="btn1" class="panel-heading">
               <h2>获取学员信息</h2>
            </div>
            <div class="panel-body">
                <button class="btn btn-success">获取所有学员的信息</button><br/>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <td>学号</td>
                            <td>姓名</td>
                            <td>年龄</td>
                            <td>性别</td>
                        </tr>
                    </thead>
                    <tbody id="t1">
                        
                    </tbody>
                </table>
            </div>
            <div class="panel-footer">
                <a href="./添加学员信息.html">新增学员信息</a>
            </div>
        </div>
    </div>

js部分为：

	window.onload=function(){
            // 获取点击的按钮
            var oBtn=document.getElementById("btn1");
            var oT1=document.getElementById("t1");
            oBtn.onclick=function(){
                // console.log(1)
                //调用jq的ajax方法
                $.ajax({
                    //方法
                    method:"get",
                    url:"./php/index-json.php",
                    // 成功之后干什么事情：
                    success:function(result){
                        // 把传过来的json字符串转换为对象
                        var arr=JSON.parse(result);
                        var str="";
                        for(var i=0;i<arr.length;i++){
                            // 渲染到页面中
                            str+=`<tr>
                                    <td>${arr[i].id}</td>
                                    <td>${arr[i].name}</td>
                                    <td>${arr[i].age}</td>
                                    <td>${arr[i].sex}</td>
                                </tr>`
                        }
                        // 添加到页面中
                        oT1.innerHTML=str;
                    },
                    error:function(msg){
                        alert(msg)
                    }
                    
                })
            }
        }

php代码为：

<?php
    header('Content-type: text/html; charset=UTF8');

    // 链接数据库(数据库的名字，账号，密码)
    $link=mysqli_connect("localhost","root","");

    // 判断数据库是否链接成功
    if(!$link){
        echo "连接失败";
        exit;
    }

    // 全部转换为utf-8形式
    mysqli_set_charset($link,"utf8");

    // 连接数据库(自己建的数据库的名字)
    mysqli_select_db($link,"test");

    // 准备sql语句（查询当前表中的数据）
    $sql="SELECT * FROM student";

    // 发送sql语句
    $res=mysqli_query($link,$sql);

    // 创建一个数组
    $arr=array();

    // 循环拿到的数据
    while($row=mysqli_fetch_assoc($res)){
        // 把每个数据都存储到这个数中
        array_push($arr,$row);
    }
    // 然后把数组转换为json格式的
    echo json_encode($arr);

    // 关闭数据库
    mysqli_close($link);
    
?>

原理其实很简单，就是我们通过ajax发送请求，请求php页面处理数据库中的数据，当php页面请求的数据转换为索引数组然后拼接成字符串以后，输出ajax把php页面产生的数据直接拿到html页面上，直接拿到想要的数据，通过循环并渲染到页面上面。