Maison > Article > développement back-end > Comment utiliser la technologie PHP et AJAX pour implémenter des fonctions d'ajout, de suppression, de modification et de recherche
Comment utiliser la technologie PHP et AJAX pour implémenter des fonctions d'ajout, de suppression, de modification et de recherche
- PHPzoriginal
- 2023-04-18 10:19:00679parcourir
Ces dernières années, avec le développement rapide et la vulgarisation de la technologie Web, de plus en plus de sites Web et d'applications ont adopté la technologie AJAX pour obtenir une expérience interactive plus dynamique et intelligente. En programmation WEB, PHP est un langage de programmation côté serveur très couramment utilisé. Par conséquent, combiner les technologies PHP et AJAX pour mettre en œuvre des opérations d’ajout, de suppression, de modification et de requête est devenu le premier choix de nombreux développeurs WEB. Cet article expliquera comment utiliser la technologie PHP et AJAX pour implémenter les fonctions d'ajout, de suppression, de modification et de vérification.
- Connaissance de base de PHP
Avant d'introduire la technologie PHP et AJAX, nous devons comprendre certaines syntaxes de base et méthodes de manipulation de données de PHP :
1.1 Syntaxe PHP de base
PHP est un serveur dynamique et interprétatif C'est un côté -end, et son format de syntaxe de base comprend :
1. Le code PHP commence par .
2. Les instructions PHP se terminent par un point-virgule « ; ».
3. Les variables PHP commencent par le symbole $, tel que $name.
4. Il existe deux manières de commenter en PHP : // pour les commentaires sur une seule ligne, et /.../ pour les commentaires sur plusieurs lignes.
Ce qui suit est un exemple de syntaxe PHP :
<?php
// 这是单行注释
/*
这是多行注释
*/
$name = "Tom"; // 定义一个变量
echo "Hello, ".$name."!"; // 输出变量
?>
1.2 Opérations sur les données PHP
PHP peut interagir avec une variété de bases de données, telles que MySQL, Oracle, SQL Server, etc. En PHP, la base de données MySQL est principalement utilisée et l'interaction avec la base de données MySQL est réalisée via des bibliothèques d'extension telles que MySQLi ou PDO. Voici les opérations de base des bases de données PHP et MySQL :
1. Connectez-vous à la base de données
$con = mysqli_connect("localhost","username","password","dbname");
2 Exécutez l'instruction SQL et renvoyez l'ensemble de résultats
$sql = "SELECT * FROM Users"; $result = mysqli_query($con,$sql);
3. Lisez les données dans l'ensemble de résultats
while($row = mysqli_fetch_array($result))
{
echo $row['UserName'];
echo $row['Password'];
echo $row['Email'];
}
4. . Fermez la connexion à la base de données
mysqli_close($con);
- Utilisez AJAX pour implémenter l'ajout, la suppression, la modification et la requête
Dans cet article, nous prendrons le système de gestion des utilisateurs comme exemple pour présenter comment utiliser AJAX et PHP pour implémenter les quatre suivants. fonctions :
1. Interroger les informations utilisateur
2. Ajouter de nouveaux utilisateurs
3. Modifier les informations utilisateur
4. Supprimer les informations utilisateur
2.1 Interroger les informations utilisateur
Nous implémentons d'abord la fonction d'interrogation des informations utilisateur, qui contiennent deux parties : la page front-end et le script PHP back-end.
2.1.1 Page frontale
Nous utilisons HTML et AJAX pour implémenter la page frontale pour interroger les informations utilisateur :
<!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>
Dans le code ci-dessus, nous utilisons la bibliothèque jQuery pour lancer une requête AJAX, accédez au query_user .php et renvoie le JSON. Les données formatées sont restituées dans la page.
2.1.2 Script PHP back-end
Voici le code du script 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);
?>
Dans le code, nous renvoyons les résultats de la requête au format JSON. Si la requête réussit, la valeur du code. Le champ est 0 et le champ de données est le tableau de résultats de la requête ; sinon, le champ de code est -1 et le champ de message est l'information d'invite en cas d'échec de la requête.
2.2 Ajouter un nouvel utilisateur
Lors de l'implémentation de la fonction d'ajout d'un nouvel utilisateur, nous devons envoyer les données utilisateur au script PHP, nous utilisons donc la méthode POST, et JavaScript et PHP transmettent le super $_POST variable globale pour le transfert des paramètres. $_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
serialize() de jQuery pour encapsuler les données du formulaire dans une chaîne et les soumettre au script PHP. 🎜🎜2.2.2 Script PHP back-end🎜🎜Voici le code du script add_user.php :🎜rrreee🎜Dans le code, nous utilisons $_POST pour obtenir les données du formulaire transmises par le page frontale et utilisez l'extension mysqli. La bibliothèque insère des données dans une base de données MySQL. 🎜🎜2.3 Modifier les informations utilisateur🎜🎜Lors de la mise en œuvre de la fonction de modification des informations utilisateur, nous devons interroger les informations utilisateur en fonction de l'ID utilisateur et afficher les informations demandées sur la page frontale. L'utilisateur peut modifier les informations et soumettre les informations. formulaire d'épargne. 🎜🎜2.3.1 Page frontale🎜🎜Ce qui suit est la page frontale pour modifier les informations de l'utilisateur : 🎜rrreee🎜Dans le code ci-dessus, nous définissons un champ caché dans le formulaire pour stocker l'ID utilisateur et obtenir l'utilisateur Valeur d'identification via les paramètres de requête. Et envoyez une requête AJAX pour obtenir des informations sur l'utilisateur et afficher les informations dans le formulaire. Lors de l'événement de soumission du formulaire, nous soumettons les informations modifiées de l'utilisateur au script PHP pour mise à jour via la méthode AJAX. 🎜🎜2.3.2 Script PHP back-end🎜🎜Voici le code du script edit_user.php : 🎜rrreee🎜Dans le code, nous utilisons toujours $_POST pour obtenir les données du formulaire transmises par la page frontale et utilisez l'extension mysqli. La bibliothèque met à jour les données utilisateur dans la base de données. 🎜🎜2.4 Supprimer les informations utilisateur🎜🎜Lors de la mise en œuvre de la fonction de suppression des informations utilisateur, nous devons supprimer les informations utilisateur en fonction de l'ID utilisateur. 🎜🎜2.4.1 Page frontale🎜🎜Ce qui suit est la page frontale pour supprimer les informations utilisateur : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons AJAX pour demander toutes les informations utilisateur dans la base de données et les restituer dans un tableau. Un bouton "Supprimer" est ajouté à chaque ligne du tableau. Lorsque vous cliquez dessus, une requête AJAX est envoyée pour supprimer les informations utilisateur dans la ligne actuelle. 🎜🎜2.4.2 Script PHP back-end🎜🎜Voici le code du script delete_user.php : 🎜rrreee🎜Dans le code, nous obtenons l'ID utilisateur transmis par la page front-end via $_POST code> et utilisez la bibliothèque d'extension mysqli Supprimez les données utilisateur correspondantes de la base de données. 🎜<ol start="3"><li>Résumé</li></ol>
<p>Cet article explique comment utiliser la technologie PHP et AJAX pour implémenter les fonctions d'ajout, de suppression, de modification et de requête. Il détaille le processus d'implémentation à partir de la syntaxe de base de PHP, des opérations de données MySQL, de l'envoi de requêtes AJAX, etc., et fournit la page frontale de support et les scripts PHP backend. L'apprentissage et la maîtrise des connaissances présentées dans cet article peuvent aider les développeurs à réaliser plus efficacement le développement d'applications WEB. </p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Simulateur essentiel pour le développement d'APP : Comment télécharger et utiliser le simulateur Yeshen (images et texte)
- Cartes mentales utiles recommandées : Baidu Mind Map et comment l'utiliser
- Pourquoi les programmeurs méprisent-ils PHP ? PHP est-il utile ?
- 0 Le PHP de base est-il facile à apprendre ?
- Comment utiliser la fonction array_diff en php