PHP 및 AJAX 기술을 사용하여 추가, 삭제, 수정 및 검색 기능을 구현하는 방법
- PHPz원래의
- 2023-04-18 10:19:00676검색
최근에는 웹 기술의 급속한 발전과 대중화로 인해 더욱 역동적이고 지능적인 대화형 경험을 달성하기 위해 AJAX 기술을 채택하는 웹사이트와 애플리케이션이 점점 더 많아지고 있습니다. 웹 프로그래밍에서 PHP는 매우 일반적으로 사용되는 서버측 프로그래밍 언어입니다. 따라서 추가, 삭제, 수정 및 쿼리 작업을 구현하기 위해 PHP와 AJAX 기술을 결합하는 것은 많은 웹 개발자의 첫 번째 선택이 되었습니다. 이 기사에서는 PHP 및 AJAX 기술을 사용하여 추가, 삭제, 수정 및 확인 기능을 구현하는 방법을 소개합니다.
- PHP에 대한 기본 지식
PHP와 AJAX 기술을 소개하기 전에 PHP의 몇 가지 기본 구문과 데이터 조작 방법을 이해해야 합니다.
1.1 기본 PHP 구문
PHP는 동적 해석 서버입니다. -end 스크립팅 언어 및 기본 구문 형식은 다음과 같습니다.
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 데이터베이스가 주로 사용되며, MySQL 데이터베이스와의 상호작용은 MySQLi나 PDO와 같은 확장 라이브러리를 통해 이루어진다. 다음은 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 형식으로 반환합니다. 쿼리가 성공하면 코드 필드의 값은 다음과 같습니다. 0이고 데이터 필드는 쿼리 결과 배열입니다. 그렇지 않으면 코드 필드는 -1이고 메시지 필드는 쿼리 실패에 대한 프롬프트 정보입니다.
2.2 새 사용자 추가
새 사용자 추가 기능을 구현할 때 사용자 데이터를 PHP 스크립트로 보내야 하므로 POST 메서드를 사용하고 JavaScript와 PHP는 $_POST super를 전달합니다. 매개변수 전송을 위한 전역 변수입니다.
2.2.1 프론트엔드 페이지$_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() 메서드를 사용하여 양식 데이터를 문자열로 캡슐화하고 이를 PHP 스크립트에 제출했습니다. 🎜🎜2.2.2 백엔드 PHP 스크립트🎜🎜다음은 add_user.php 스크립트의 코드입니다. 🎜rrreee🎜코드에서는 $_POST를 사용하여 프런트 엔드 페이지 및 mysqli 확장 사용 라이브러리는 MySQL 데이터베이스에 데이터를 삽입합니다. 🎜🎜2.3 사용자 정보 수정🎜🎜사용자 정보 수정 기능을 구현할 때 사용자 ID를 기준으로 사용자 정보를 조회하고 조회된 정보를 프런트 엔드 페이지에 표시해야 합니다. 사용자는 정보를 수정하고 제출할 수 있습니다. 저장을 위한 양식입니다. 🎜🎜2.3.1 프런트 엔드 페이지🎜🎜다음은 사용자 정보 수정을 위한 프런트 엔드 페이지입니다. 🎜rrreee🎜위 코드에서는 사용자 ID를 저장하기 위해 폼에 숨겨진 필드를 정의하고 사용자 정보를 가져옵니다. 쿼리 매개변수를 통해 ID 값을 보내고 AJAX 요청을 보내 사용자 정보를 얻고 해당 정보를 양식에 표시합니다. 양식 제출 이벤트에서는 AJAX 메소드를 통해 업데이트하기 위해 사용자의 수정된 정보를 PHP 스크립트에 제출합니다. 🎜🎜2.3.2 백엔드 PHP 스크립트🎜🎜다음은 edit_user.php 스크립트의 코드입니다: 🎜rrreee🎜코드에서는 여전히 $_POST를 사용하여 전달된 양식 데이터를 얻습니다. 프런트 엔드 페이지 및 mysqli 확장 사용 라이브러리는 데이터베이스의 사용자 데이터를 업데이트합니다. 🎜🎜2.4 사용자 정보 삭제🎜🎜사용자 정보 삭제 기능 구현 시, 사용자 ID를 기준으로 사용자 정보를 삭제해야 합니다. 🎜🎜2.4.1 프런트 엔드 페이지🎜🎜다음은 사용자 정보 삭제를 위한 프런트 엔드 페이지입니다. 🎜rrreee🎜위 코드에서는 AJAX를 사용하여 데이터베이스에 있는 모든 사용자 정보를 요청하고 이를 테이블로 렌더링합니다. 테이블의 각 행에 "삭제" 버튼이 추가됩니다. 클릭하면 현재 행의 사용자 정보를 삭제하라는 AJAX 요청이 전송됩니다. 🎜🎜2.4.2 백엔드 PHP 스크립트 🎜🎜다음은 delete_user.php 스크립트의 코드입니다. 🎜rrreee🎜 코드에서는 $_POST를 통해 프론트엔드 페이지에서 전달한 사용자 ID를 얻습니다. code>를 입력하고 mysqli 확장 라이브러리를 사용하여 해당 사용자 데이터를 데이터베이스에서 삭제합니다. 🎜<ol start="3"><li>요약</li></ol>
<p>이 글에서는 PHP와 AJAX 기술을 활용하여 추가, 삭제, 수정, 검색 기능을 구현하는 방법을 소개하며, PHP의 기본 구문부터 MySQL 데이터 연산, AJAX 요청 전송, 등을 지원하며 프론트엔드 페이지와 백엔드 PHP 스크립트를 제공합니다. 이 기사의 지식을 배우고 익히면 개발자가 웹 기반 애플리케이션 개발을 보다 효율적으로 완료하는 데 도움이 될 수 있습니다. </p>위 내용은 PHP 및 AJAX 기술을 사용하여 추가, 삭제, 수정 및 검색 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!