簡介:
這是一個可以增刪改查的成績管理系統的ajax交互練習案例
主要技術:php mysql bootstrapUI庫 ajax
效果如下:
布局:
布局使用bootstrapUI庫搭建
需引入bootstrap.css外部樣式
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
整體分為三部分
- 頭部: logo部分 以及添加信息按鈕
- 中部:表頭與表格 以及刪除 修改按鈕
- 底部:分頁
其中添加信息與修改按鈕使用模態框
需引入三個外部文件
分別為:
- jqery.js
- popper.js
- bootstrap.js
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js""></script>
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./lib/bootstrap.css"> <style> thead tr th { text-align: center; } tbody tr td { text-align: center; } </style> </head> <body> <!-- 頭部 --> <div class="container"> <!-- 頭 --> <div class="row align-items-center my-5"> <div class="col-2 h2">logo</div> <div class="col-4 h4">成績管理系統</div> <button type="button" class="btn btn-primary col-1" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" id="insert">添加信息</button> </div> <!-- 表格 --> <div class="row my-5"> <table class="table thead-inverse table-bordered table-sm"> <thead> <tr> <th>id</th> <th>姓名</th> <th>成績</th> <th>刪除</th> <th>修改</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>admin</td> <td>80</td> <td><span class="btn btn-primary">刪除</span></td> <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" ly="update">修改</button></td> </tr> </tbody> </table> </div> <!-- 底部分頁 --> <div class="row"> <nav aria-label="Page navigation example" class="w-100"> <ul class="pagination pagination-sm justify-content-center"> <li class="page-item disabled"><a class="page-link" href="#">上一頁</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">下一頁</a></li> </ul> </nav> </div> </div> <!-- 模態框 --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="exampleModalLabel">請輸入信息：</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">姓名:</label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="message-text" class="control-label">機試:</label> <input class="form-control" id="cpt" /> </div> <div class="form-group"> <label for="message-text" class="control-label">筆試:</label> <input class="form-control" id="pen" /> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary mx-auto" data-dismiss="modal" id="send">提交</button> </div> </div> </div> </div> </body> <script src="./js/index.js"></script> <!-- 模態框引入的js --> <script src="./lib/jquery-2.2.4.js"></script> <script src="./lib/popper.js"></script> <script src="./lib/bootstrap.js"></script> </html>
創建數據庫
使用Mysql-Font創建一個新的數據庫,用來存儲數據
tip:將字符集設置為utf-8,否則無法顯示中文
設置字段
- 名稱:id 默認
- 名稱:name 類型:char 長度:10
- 名稱:cpt 類型:float 長度/小數點:5,2
- 名稱:pen類型:float 長度/小數點:5,2
並在數據庫提前存好兩條數據
功能實現--查找數據
在頁面開始加載時,就要向數據庫請求數據
大致過程為：開啟ajax向php請求，php操作數據庫拿到數據發回給前端，請求成功后渲染頁面；
this.selectUrl = "http://localhost/Management/data/select.php"; //接口就是自己寫的php文件
1.開啟ajax,請求數據
ajax({ rl:this.selectUrl, success:function(res){ console.log(res); } })
2.php操作數據庫
- 鏈接數據庫
- 准備報錯
- 如果連接成功,不報錯
- 如果連接失敗,將錯誤信息以json格式返回,錯誤碼為code=0;
- 准備mysql命令
- 發送mysql命令,並將數據保存在$res 判斷mysql返回的數據
- 獲取數據成功,將數據處理成json樣式數據返回
- 獲取數據失敗,將錯誤信息="獲取數據失敗"返回,錯誤碼為code=1;
查詢的php文件代碼如下:
<?php
// 鏈接數據庫 服務器:端口號 用戶名 密碼 數據庫名稱
$link = @new mysqli("localhost:3306","root","root","test");
if($link->connect_error){
//將錯誤信息的關聯數組處理成json,返回給前端,請求失敗報錯碼code=0
$err = array("code"=>0,"msg"=>$link->connect_error);
die(json_encode($err)); //結束語句,並打印報錯(類似於return)
}
$str = "SELECT * FROM management";
$res = $link->query($str);
//判斷res是否為空數據
if($res){
$str = "";
while($arr = $res->fetch_assoc()){ //將res資源型數據,解析成關聯數組,因為每次只能解析一條,所以while重復解析
$str = $str . json_encode($arr) . ","; //點為字符串拼接
}
echo "[" . substr($str,0,-1) . "]"; //將對象拼接成json格式 中間加逗號 末尾去掉逗號 兩邊加中括號
}else{
//如果獲取數據失敗 將錯誤碼code=2 錯誤信息="獲取數據失敗"存入關聯數組
$err = array("code"=>2,"msg"=>"獲取數據失敗");
echo json_encode($err);
}
?>
3.渲染頁面
在完成php接口和成功開啟ajax請求到數據后；
如果請求成功,可以在控制台看到拿到的數據
如果數據庫連接失敗，會提示錯誤碼code=0；
此時就可以開始寫渲染頁面的功能。
(1)思路
將拿到的數據解析成對象 ===> JSON.parse(res)
判斷是否有錯誤碼
- 沒有錯誤碼說明,請求數據成功
- 錯誤碼為0,說明鏈接數據庫失敗
- 錯誤碼為2,說明請求數據失敗
如果成功請求到數據,渲染頁面;
(2).代碼實現:
// 查詢數據 selectLoad(){ var that = this; ajax({ url:this.selectUrl, success:function(res){ // console.log(res); that.res = JSON.parse(res); if(that.res.code == 0){ alert("連接數據庫失敗"); }else if(that.res == 1){ alert("請求數據失敗") }else{ that.display(); } } }) } display(){ // console.log(this.res); var str = ""; for(var i=0;i<this.res.length;i++){ str += `<tr> <td>${this.res[i].Id}</td> <td>${this.res[i].name}</td> <td>${this.res[i].cpt}</td> <td>${this.res[i].pen}</td> <td><span class="btn btn-primary btn-d">刪除</span></td> <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" ly="update">修改</button></td> </tr>`; } this.tbody.innerHTML = str; }
功能實現 -- 添加和修改信息
思路:
1.頁面中有兩個模態框,添加信息和修改信息,首先要判斷點擊的是添加按鈕還是修改按鈕
- 模態框引用了外部js,為了防止事件覆蓋,使用事件監聽添加事件
- 第一個:添加信息按鈕(id = insert),可以直接添加點擊事件監聽
- 第二個:修改按鈕, 利用事件委托,給修改按鈕添加點擊事件監聽
- 第三個:提交按鈕(id = sned),直接添加點擊事件監聽
(1) 給模態框聲明一個狀態量
this.type = 0 //為0時表示添加信息
(2) 點擊添加按鈕是,將type = 0;
(3) 點擊修改按鈕時,將type = 1;
(4) 點擊提交按鈕時,判斷狀態,提交數據
實現的功能是:
- 點擊按鈕,提交后,控制台打印"添加"
- 點擊修改按鈕,提交后.控制台打印"提交"
代碼如下:
addEvent(){ var that = this; //給添加按鈕添加事件監聽 this.insert.addEventListener("click",function(){ that.type = 0; }) //利用事件委托,給修改按鈕添加事件監聽 this.tbody.addEventListener("click",function(eve){ var e = eve || window.event; var target = e.target || e.srcElement; // 如果選擇的元素,自定義屬性ly為update,則選中了修改按鈕 if(target.getAttribute("ly") === "update"){ that.type = 1; } }) //給提交按鈕添加事件監聽 this.send.addEventListener("click",function(){ if(that.type == 0){ console.log("添加"); }else{ console.log("修改"); } }) }
效果如下:
添加信息時,需要將輸入框的內容清空
that.name.value = that.cpt.value = that.pen.value = "";
2.更改數據后將添加或者數據寫入到頁面
- 在寫入數據之前,需要先獲取輸入框中的value,
- 將獲取到的value,通過ajax發送到php,
- php操作數據庫,將結果返回給前端.
(1) 獲取數據
// 獲取模態框數據 (姓名 機試成績 筆試成績) this.name = document.getElementById("name"); this.cpt = document.getElementById("cpt"); this.pen = document.getElementById("pen");
//點擊提交按鈕時,獲取數據,准備發給ajax that.n = that.name.value; that.c = that.cpt.value; that.p = that.pen.value;
(2) 將數據發給ajax,請求成功之后,解析數據,准備渲染
// 添加信息,開啟ajax 發送並請求新數據 insertLoad(){ ajax({ url:this.insertUrl, data:{ n:this.n, c:this.c, p:this.p }, success:function(res){ console.log(res); } }) }
(3) 准備PHP文件 數據接口
this.insertUrl = "http://localhost/Management/data/insert.php";
添加功能的php文件思路:
- 連接數據庫
- 鏈接成功,不報錯
- 連接失敗,將錯誤信息以json格式返回,錯誤碼為code=0
- 准備查詢mysql命令
- 向數據庫發送添加mysql命令,會返回布爾值,並將返回結果保存在$q
- 判斷是否成功添加數據
- 如果成功添加,執行封裝好的查詢數據函數,返回查詢到的函數
- 如果添加失敗,將錯誤信息返回,錯誤碼為code = 2;
<?php // 鏈接數據庫 服務器:端口號 用戶名 密碼 數據庫名稱 $link = @new mysqli("localhost:3306","root","root","test"); if($link->connect_error){ //將錯誤信息的關聯數組處理成json,返回給前端,請求失敗報錯碼code=0 $err = array("code"=>0,"msg"=>$link->connect_error); die(json_encode($err)); //結束語句,並打印報錯(類似於return) } $n = @$_REQUEST["n"]; $c = @$_REQUEST["c"]; $p = @$_REQUEST["p"]; //mysql添加命令 $str = "INSERT management (name,cpt, pen) VALUES('".$n."',".$c.",".$p.")"; //發送mysql命令 $q = $link->query($str); if($q){ echo select(); //如果添加成功,返回查詢數據的狀態 }else{ $err = array("code"=>2,"msg"=>"添加數據失敗"); //如果添加失敗,返回錯誤信息,與錯誤碼 die(json_encode($err)); } // 將查詢數據的代碼封裝成一個函數,返回報錯信息與成功請求到的數據 function select(){ global $link; $str = "SELECT * FROM management"; $res = $link->query($str); if($res){ $str = ""; while($arr = $res->fetch_assoc()){ $str = $str . json_encode($arr) . ","; } return "[" . substr($str,0,-1) . "]"; }else{ $err = array("code"=>2,"msg"=>"獲取數據失敗"); return json_encode($err); } } ?>
(4)渲染頁面
- 成功添加數據后,會返回一個json樣式的數據
- 添加數據失敗后,會返回包含有錯誤碼的數據
將拿到的數據解析成對象 ===> JSON.parse(res)
所以判斷是否有錯誤碼
- 沒有錯誤碼說明,請求數據成功
- 錯誤碼為0,說明鏈接數據庫失敗
- 錯誤碼為2,說明請求數據失敗
如果成功請求到數據,渲染頁面;
代碼如下
// 添加信息,開啟ajax 發送並請求新數據 insertLoad(){ var that = this; ajax({ url:this.insertUrl, data:{ n:this.n, c:this.c, p:this.p }, success:function(res){ that.res = JSON.parse(res); if(that.res.code == 0){ alert("連接數據庫失敗"); }else if(that.res == 2){ alert("添加數據失敗") }else{ // console.log(that.res); that.display(); // 刪除方法 that.delete(); } } }) }
效果如下:
