PHP實現前臺頁面與MySQL的數據綁定、同步更新

時間 2019-11-08

標籤 php 實現前臺頁面 mysql 數據綁定同步更新欄目 PHP 简体版

原文原文鏈接

今天我來給你們介紹一個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();                
                });
        
            }

最終，效果以下：