如何使用PHP和AJAX技術實現增刪改查功能
- PHPz原創
- 2023-04-18 10:19:00679瀏覽
近年來，隨著Web技術的快速發展和普及，越來越多的網站和應用程式採用了AJAX技術，實現了更動態、更聰明的互動體驗。在WEB程式設計中，PHP是一種非常常用的伺服器端程式語言。因此，結合PHP和AJAX技術來實現增刪改查作業已成為眾多WEB開發人員的首選。本文將介紹如何使用PHP和AJAX技術實現增刪改查功能。
- PHP基礎
在介紹PHP和AJAX技術之前，我們需要先了解一些PHP的基本語法和資料操作方法：
1.1 PHP基本語法
PHP是一種動態的、解釋性的伺服器端腳本語言，其基本的語法格式包括：
1、PHP程式碼以 結尾。
2、PHP語句以分號 “;” 結束。
3、PHP變數以$符號開始，如 $name。
4、PHP中的註解有兩種方式：單行註解用 //，多行註解用 /.../。
以下是PHP語法的範例：
<?php
// 这是单行注释
/*
这是多行注释
*/
$name = "Tom"; // 定义一个变量
echo "Hello, ".$name."!"; // 输出变量
?>
1.2 PHP資料操作
PHP可以與多種資料庫進行交互，例如MySQL、Oracle、SQL Server等。在PHP中，主要使用MySQL資料庫，透過MySQLi或PDO等擴充函式庫實現與MySQL資料庫的交互。以下為PHP與MySQL資料庫的基本操作：
1、連接資料庫
$con = mysqli_connect("localhost","username","password","dbname");
2、執行SQL語句並傳回結果集
$sql = "SELECT * FROM Users"; $result = mysqli_query($con,$sql);
3、讀取結果集中的資料
while($row = mysqli_fetch_array($result))
{
echo $row['UserName'];
echo $row['Password'];
echo $row['Email'];
}
4、關閉資料庫連線
mysqli_close($con);
- 使用AJAX實作增刪改查
在本文中，我們將以使用者管理系統為例，介紹如何使用AJAX和PHP實現以下四個功能：
1、查詢用戶資訊
2、新增用戶
3、修改用戶資訊
4、刪除使用者資訊
2.1 查詢使用者資訊
我們首先來實作查詢使用者資訊的功能，其中包含兩個部分：前端頁面和後端PHP腳本。
2.1.1 前端頁面
我們使用HTML和AJAX實作查詢使用者資訊的前端頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>用户管理系统 - 查询</title>
</head>
<body>
<h1>用户管理系统 - 查询</h1>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>邮箱</th>
</tr>
</thead>
<tbody id="user_table">
</tbody>
</table>
<script>
$(document).ready(function(){
$.ajax({
url:'query_user.php',
type:'get',
dataType:'json',
success:function(data){
if(data.code==0){
var users = data.data;
var tr = '';
for(var i=0;i<users.length;i++){
tr += '<tr>'
+'<td>'+users[i].id+'</td>'
+'<td>'+users[i].username+'</td>'
+'<td>'+users[i].password+'</td>'
+'<td>'+users[i].email+'</td>'
+'</tr>';
}
$('#user_table').append(tr);
}
},
error:function(){
alert('查询失败！');
}
});
});
</script>
</body>
</html>
以上程式碼中，我們使用了jQuery函式庫來啟動AJAX請求，存取query_user.php腳本，並將傳回的JSON格式的資料渲染到頁面中。
2.1.2 後端PHP腳本
以下為query_user.php腳本的程式碼：
<?php
$con = mysqli_connect("localhost","username","password","dbname");
$sql = "SELECT * FROM users";
$result = mysqli_query($con,$sql);
$users = array();
if(mysqli_num_rows($result)>0){
while($row = mysqli_fetch_assoc($result)){
$users[] = $row;
}
$response = array(
'code'=>0,
'message'=>'查询成功',
'data'=>$users
);
}else{
$response = array(
'code'=>-1,
'message'=>'查询失败'
);
}
echo json_encode($response);
mysqli_close($con);
?>
程式碼中，我們以JSON格式傳回查詢結果，如果查詢成功，則code欄位的值為0，data欄位為查詢結果陣列；否則code欄位為-1，message欄位為查詢失敗的提示資訊。
2.2 新增使用者
在實作新增使用者功能時，我們需要將使用者資料傳送到PHP腳本，因此我們使用POST方法，同時JavaScript和PHP透過$_POST超全域變數進行參數傳遞。
2.2.1 前端頁面
以下為新增使用者的前端頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>用户管理系统 - 添加</title>
</head>
<body>
<h1>用户管理系统 - 添加</h1>
<form id="add_form">
<label>用户名：</label>
<input type="text" name="username"><br>
<label>密码：</label>
<input type="password" name="password"><br>
<label>邮箱：</label>
<input type="email" name="email"><br>
<input type="submit" value="添加">
</form>
<script>
$(function(){
$('#add_form').submit(function(event){
event.preventDefault();
var data = $(this).serialize();
$.ajax({
url:'add_user.php',
type:'post',
dataType:'json',
data:data,
success:function(data){
if(data.code==0){
alert('添加成功！');
}else{
alert('添加失败！');
}
},
error:function(){
alert('添加失败！');
}
});
});
});
</script>
</body>
</html>
以上程式碼中，我們定義了一個表單，設定了表單中各個輸入框的名稱和類型，預留了一個按鈕來提交表單。在按鈕的點擊事件中，我們使用了jQuery的serialize()方法將表單資料封裝成字串提交給PHP腳本。
2.2.2 後端PHP腳本
以下為add_user.php腳本的程式碼：
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$con = mysqli_connect("localhost","username","password","dbname");
$sql = "INSERT INTO users (username,password,email) VALUES ('$username','$password','$email')";
if(mysqli_query($con,$sql)){
$response = array(
'code'=>0,
'message'=>'添加成功'
);
}else{
$response = array(
'code'=>-1,
'message'=>'添加失败'
);
}
echo json_encode($response);
mysqli_close($con);
}
?>
程式碼中，我們使用了$_POST來取得前端頁面傳遞的表單數據，並使用mysqli擴充庫將數據插入到MySQL資料庫。
2.3 修改用戶資訊
在實現修改用戶資訊的功能時，我們需要根據用戶ID查詢用戶信息，並將查詢到的信息展示在前端頁面中，用戶可以修改信息後提交表單進行儲存。
2.3.1 前端頁面
以下為修改用戶資訊的前端頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>用户管理系统 - 修改</title>
</head>
<body>
<h1>用户管理系统 - 修改</h1>
<form id="edit_form">
<input type="hidden" name="id" value="">
<label>用户名：</label>
<input type="text" name="username" value=""><br>
<label>密码：</label>
<input type="password" name="password" value=""><br>
<label>邮箱：</label>
<input type="email" name="email" value=""><br>
<input type="submit" value="保存">
</form>
<script>
function queryUser(id){
$.ajax({
url:'query_user.php',
type:'get',
dataType:'json',
data:{id:id},
success:function(data){
if(data.code==0){
var user = data.data[0];
$('input[name="id"]').val(user.id);
$('input[name="username"]').val(user.username);
$('input[name="password"]').val(user.password);
$('input[name="email"]').val(user.email);
}else{
alert('查询失败！');
}
},
error:function(){
alert('查询失败！');
}
});
}
$(function(){
var id = parseInt(location.search.substring(4));
if(isNaN(id)){
alert('用户ID错误！');
}else{
queryUser(id);
$('#edit_form').submit(function(event){
event.preventDefault();
var data = $(this).serialize();
$.ajax({
url:'edit_user.php',
type:'post',
dataType:'json',
data:data,
success:function(data){
if(data.code==0){
alert('保存成功！');
}else{
alert('保存失败！');
}
},
error:function(){
alert('保存失败！');
}
});
});
}
});
</script>
</body>
</html>
以上程式碼中，我們在表單中定義了一個隱藏網域用於儲存用戶ID，透過查詢參數的方式取得使用者ID值，並傳送AJAX請求以取得使用者訊息，將資訊顯示在表單中。在表單提交事件中，我們將使用者修改後的資訊透過AJAX方法提交給PHP腳本進行更新。
2.3.2 後端PHP腳本
以下為edit_user.php腳本的程式碼：
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
$id = $_POST['id'];
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$con = mysqli_connect("localhost","username","password","dbname");
$sql = "UPDATE users SET username='$username',password='$password',email='$email' WHERE id=$id";
if(mysqli_query($con,$sql)){
$response = array(
'code'=>0,
'message'=>'保存成功'
);
}else{
$response = array(
'code'=>-1,
'message'=>'保存失败'
);
}
echo json_encode($response);
mysqli_close($con);
}
?>
程式碼中，我們仍然使用$_POST取得前端頁面傳遞的表單數據，並使用mysqli擴充庫更新資料庫中的使用者資料。
2.4 刪除使用者資訊
在實作刪除使用者資訊的功能時，我們需要根據使用者ID刪除使用者資訊。
2.4.1 前端頁面
以下為刪除使用者資訊的前端頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>用户管理系统 - 删除</title>
</head>
<body>
<h1>用户管理系统 - 删除</h1>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody id="user_table">
</tbody>
</table>
<script>
$(function(){
$.ajax({
url:'query_user.php',
type:'get',
dataType:'json',
success:function(data){
if(data.code==0){
var users = data.data;
var tr = '';
for(var i=0;i<users.length;i++){
tr += '<tr>'
+'<td>'+users[i].id+'</td>'
+'<td>'+users[i].username+'</td>'
+'<td>'+users[i].password+'</td>'
+'<td>'+users[i].email+'</td>'
+'<td><a href="javascript:void(0);" onclick="deleteUser('+users[i].id+');">删除</a></td>'
+'</tr>';
}
$('#user_table').append(tr);
}
},
error:function(){
alert('查询失败！');
}
});
});
function deleteUser(id){
if(confirm('确定要删除该用户吗？')){
$.ajax({
url:'delete_user.php',
type:'post',
dataType:'json',
data:{id:id},
success:function(data){
if(data.code==0){
alert('删除成功！');
location.reload();
}else{
alert('删除失败！');
}
},
error:function(){
alert('删除失败！');
}
});
}
}
</script>
</body>
</html>
以上程式碼中，我們使用AJAX請求獲取資料庫中所有使用者信息，並渲染到表格中。在表格的每一行中新增了一個「刪除」按鈕，點擊後發送AJAX請求刪除目前行中的使用者資訊。
2.4.2 後端PHP腳本
以下為delete_user.php腳本的程式碼：
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
$id = $_POST['id'];
$con = mysqli_connect("localhost","username","password","dbname");
$sql = "DELETE FROM users WHERE id=$id";
if(mysqli_query($con,$sql)){
$response = array(
'code'=>0,
'message'=>'删除成功'
);
}else{
$response = array(
'code'=>-1,
'message'=>'删除失败'
);
}
echo json_encode($response);
mysqli_close($con);
}
?>
程式碼中，我們透過$_POST取得前端頁面傳遞的使用者ID，並使用mysqli擴充庫從資料庫中刪除對應的使用者資料。
- 總結
本文介紹如何使用PHP和AJAX技術來實現增刪改查功能，從PHP基礎語法、MySQL資料操作、AJAX請求發送等方面詳細闡述了實現過程，並給出了配套的前端頁面和後端PHP腳本。學習和掌握本文的知識可以幫助開發人員更有效率地完成基於WEB的應用開發。
以上是如何使用PHP和AJAX技術實現增刪改查功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！