PHP实现前台页面与MySQL的数据绑定、同步更新
生活随笔
收集整理的這篇文章主要介紹了
PHP实现前台页面与MySQL的数据绑定、同步更新
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
今天我來給大家介紹一個PHP-MySQL的小項目。
使用 PHP和前臺Ajax?實現(xiàn)在前臺對MySQL數(shù)據(jù)庫中數(shù)據(jù)的增、刪等操作語句功能。
如果有問題，歡迎拍磚~ 有不懂的地方，提出來咱們一起探討~
首先，我們先做好前臺HTML、CSS樣式，代碼如下：
<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">用戶管理系統(tǒng)</h1><hr /><table id="table"> <thead ><tr><th>用戶Id</th><th>用戶名</th><th>密碼</th><th>真實姓名</th><th>操作</th></tr></thead><tbody></tbody>
<tfoot> // 增加數(shù)據(jù)時使用 <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>
接下來我們需要實現(xiàn)的功能是，在每次更改數(shù)據(jù)或者刷新頁面的時候，都可以將數(shù)據(jù)庫的數(shù)據(jù)顯示到網(wǎng)頁頁面中。
我們做一個純PHP文件，命名doshowUserList.php，文件中代碼如下：
<?phpheader("Content-Type:text/html;charset=utf-8"); include_once "mysql.php"; // 為了便于后期操作，我們將綁定數(shù)據(jù)庫的代碼單獨寫在另一個PHP文件中，通過導入的方式引入。$sql = <<<sql // 準備SQL語句select * from `user`; sql;$res = mysqli_query($conn, $sql); // 執(zhí)行SQL語句$arr=[];while($row=mysqli_fetch_assoc($res)){$arr[]=$row;}$json = json_encode($arr);echo $json;mysqli_free_result($res);mysqli_close($conn);PHP連接數(shù)據(jù)庫 的PHP文件，命名為mysql.php,代碼如下：
<?phpheader("Content-Type:text/html;charset=utf-8");define("HOST", "127.0.0.1");define("USERNAME", "root");define("PASSWOED", "");define("DBNAME", "mydatabase");define("CHARSET", "utf8");// 連接數(shù)據(jù)庫的同時，直接檢測數(shù)據(jù)庫連接是否成功 $conn = @mysqli_connect(HOST, USERNAME, PASSWOED, DBNAME) or die("數(shù)據(jù)庫連接失敗！<span style='color:red;'>".mysqli_connect_error()."</span>");
// 設置字符集編碼?@mysqli_set_charset($conn, CHARSET) or die("字符集編碼設置失敗！");
后臺的PHP文件寫好以后我們需要在前臺聲明一個函數(shù) getData()，在函數(shù)體內(nèi)使用ajax引入doShowUserList.php,前臺JS代碼如下：
<script src="js/jquery-3.1.1.js" type="text/javascript"></script> <script type="text/javascript">$(function(){ // 在文檔DOM加載完后，就自動獲取一遍數(shù)據(jù) getData();});// 獲取數(shù)據(jù) html中顯示tbody內(nèi)容的代碼 采用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 οnclick="delUser(${user.id})" href="">刪除</a></td></tr> `; }$("#table tbody").html(html);},"json");} </script>
獲取數(shù)據(jù)功能實現(xiàn)了，接下來我們實現(xiàn)增加數(shù)據(jù)的功能，按照上面的套路，我們首先新建一個PHP文件，命名為doAddUser.php，代碼如下：
<?phpheader("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";}在前臺聲明一個函數(shù)addUser() ,在函數(shù)體內(nèi)使用ajax引入doAddUser.php,前臺JS代碼如下：
// 新增數(shù)據(jù) 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,在前臺聲明一個函數(shù)delUser(); ?代碼分別如下顯示：
<?phpheader("Content-Type:textml;charset=utf-8");include_once "mysql.php";$id=$_POST["id"];$sql = <<<sqldelete from `user` where id = {$id}; sql;$isOk = mysqli_query($conn, $sql);if($isOk){echo "true";}else{echo "false";} // 刪除數(shù)據(jù) function delUser(id){$.post("admin/doDelUser.php",{"id":id},function(data){if (data == "true") {alert("刪除成功！")} else{alert("刪除失敗！") } getData(); });}最終，效果如下：
數(shù)據(jù)庫中的數(shù)據(jù)：
?
轉載于:https://www.cnblogs.com/Tracey-1023/p/7819225.html
總結
以上是生活随笔為你收集整理的PHP实现前台页面与MySQL的数据绑定、同步更新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 12123备案非本人车辆关系怎么写？
- 下一篇： MySQL多种安装方式选择