PHP实现前台页面与MySQL的数据绑定、同步更新

今天我来给你们介绍一个PHP-MySQL的小项目。javascript

使用 PHP和前台Ajax 实如今前台对MySQL数据库中数据的增、删等操做语句功能。php

若是有问题,欢迎拍砖~ 有不懂的地方,提出来我们一块儿探讨~css

首先,咱们先作好前台HTML、CSS样式,代码以下:html

<head>
        <meta charset="utf-8" />
        <title>主页</title>
        
        <style type="text/css">
            
            #table{                
                width:600px;
                margin: 20px auto;
                border-collapse: collapse;                                
            }
            #table thead tr{
                height: 30px;                        
                background-color: orange;
                color: white;                            
            }
            
            #table tbody tr{
                height: 30px;                        
            }
            
            #table th,td{                
                border: 1px solid black;
            }
            
            #table a{
                color: dodgerblue;
                cursor: pointer;
            }
            
        </style>
    </head>
    <body>
        <h1 align="center">用户管理系统</h1>
        <hr />
        <table id="table">        
                <thead >
                    <tr>
                            <th>用户Id</th>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>真实姓名</th>
                            <th>操做</th>
                    </tr>
                </thead>
<tbody></tbody>

<tfoot> // 增长数据时使用 <tr> <td> <input type="text" name="userid" value="id无需输入" disabled="disabled"/> </td> <td> <input type="text" name="username"/> </td> <td> <input type="text" name="pwd" /> </td> <td> <input type="text" name="truename" /> </td> <td align="center"> <input type="button" onclick="addUser()" value="新增用户" /> </td> </tr> </tfoot> </table>   </body>

接下来咱们须要实现的功能是,在每次更改数据或者刷新页面的时候,均可以将数据库的数据显示到网页页面中。java

咱们作一个纯PHP文件,命名doshowUserList.php,文件中代码以下:mysql

<?php
    
    header("Content-Type:text/html;charset=utf-8");  
    include_once "mysql.php";     // 为了便于后期操做,咱们将绑定数据库的代码单独写在另外一个PHP文件中,经过导入的方式引入。
    
    $sql = <<<sql        // 准备SQL语句
    select * from `user`;    
sql;

    $res = mysqli_query($conn, $sql);   // 执行SQL语句
    
    $arr=[];
    while($row=mysqli_fetch_assoc($res)){
        $arr[]=$row;
    }
    
    $json = json_encode($arr);
    
    echo $json;
    
    mysqli_free_result($res);
    mysqli_close($conn);

PHP链接数据库 的PHP文件,命名为mysql.php,代码以下:jquery

<?php
    
    header("Content-Type:text/html;charset=utf-8");
    
    define("HOST", "127.0.0.1");
    define("USERNAME", "root");
    define("PASSWOED", "");
    define("DBNAME", "mydatabase");
    define("CHARSET", "utf8");

  // 链接数据库的同时,直接检测数据库链接是否成功 
$conn = @mysqli_connect(HOST, USERNAME, PASSWOED, DBNAME) or die("数据库链接失败!<span style='color:red;'>".mysqli_connect_error()."</span>");
   
   // 设置字符集编码  @mysqli_set_charset(
$conn, CHARSET) or die("字符集编码设置失败!");

后台的PHP文件写好之后咱们须要在前台声明一个函数 getData(),在函数体内使用ajax引入doShowUserList.php,前台JS代码以下:ajax

<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
            
            $(function(){     // 在文档DOM加载完后,就自动获取一遍数据   
                getData();
            });
    
    // 获取数据  html中显示tbody内容的代码 采用ES6的反引号``能够直接在``中按照H5的形式写代码,比拼串的写法更简洁、更容易看
function getData(){ $.post("admin/doShowUserList.php",function(data){ var html = ``; for (var i = 0; i < data.length; i++) { var user = data[i]; html += ` <tr> <td>${user.id}</td> <td>${user.name}</td> <td>${user.pwd}</td> <td>${user.trueName}</td> <td align = "center"> <a onclick="delUser(${user.id})" href="">删除</a> </td> </tr> `; } $("#table tbody").html(html); },"json"); } </script>

获取数据功能实现了,接下来咱们实现增长数据的功能,按照上面的套路,咱们首先新建一个PHP文件,命名为doAddUser.php,代码以下:sql

<?php
    header("Content-Type:text/html;charset=utf-8");
    
    include_once 'mysql.php';
    
    // $_POST 取到前台对象user 的键名
$name = $_POST["username"];
    $pwd = $_POST["pwd"];
    $trueName = $_POST["trueName"];
    
    $sql = <<<sql      
    insert into `user`       
    values(null,"{$name}","{$pwd}","{$trueName}");
sql;


    $isOk = mysqli_query($conn, $sql);
    
    if($isOk){
        echo "true";
    }else{
        echo "false";
    }

在前台声明一个函数addUser() ,在函数体内使用ajax引入doAddUser.php,前台JS代码以下:数据库

// 新增数据            
            function addUser(){
                
                if($("input[name = 'username']").val()== "" || $("input[name = 'pwd']").val()== "" || $("input[name = 'truename']").val()== ""){
                    alert("新增不可为空!请确认!");
                    return;                
                }
                
                var user = {                
                    "username" : $("input[name='username']").val(),
                    "pwd" : $("input[name='pwd']").val(),
                    "trueName" : $("input[name='truename']").val(),
                }
                
                $.post("admin/doAddUser.php",user,function(data){
                    if (data == "false") {
                            alert("新增用户失败!")
                        }     
                        getData();        
                        
                $("input[name='username']").val("");
                $("input[name='pwd']").val("");
                $("input[name='truename']").val("");
                
                });
    
            }

最后就是删除功能了,套路同上,新建一个doDelUse.php,在前台声明一个函数delUser();  代码分别以下显示:

<?php
    
    header("Content-Type:textml;charset=utf-8");
    
    include_once "mysql.php";
    
    $id=$_POST["id"];
    
    $sql = <<<sql
    delete from `user` where id = {$id};
sql;

    $isOk = mysqli_query($conn, $sql);
    
    if($isOk){
        echo "true";
    }else{
        echo "false";
    }
// 删除数据        
            function delUser(id){
                
                $.post("admin/doDelUser.php",{"id":id},function(data){
                    if (data == "true") {
                        alert("删除成功!")
                    } else{
                        alert("删除失败!")                    
                    }            
                    getData();                
                });
        
            }
            

最终,效果以下:

数据库中的数据:

相关文章
相关标签/搜索