php ajax实现增删改查,###实现ajax的增删改查案例（jquery)
时间: 2023-07-14 16:11:57 浏览: 59
以下是一个使用 jQuery 实现增删改查的案例：
HTML 代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX CRUD Example with jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
</head>
<body>
<h2>Users</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody id="user-list">
</tbody>
</table>
<h2>Add User</h2>
<form id="add-user-form">
<label>Name</label>
<input type="text" name="name">
<br>
<label>Email</label>
<input type="email" name="email">
<br>
<button type="submit">Add User</button>
</form>
<h2>Edit User</h2>
<form id="edit-user-form">
<input type="hidden" name="id">
<label>Name</label>
<input type="text" name="name">
<br>
<label>Email</label>
<input type="email" name="email">
<br>
<button type="submit">Update User</button>
</form>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 代码：
```javascript
$(document).ready(function() {
// 显示用户列表
showUsers();
// 添加用户
$('#add-user-form').submit(function(e) {
e.preventDefault();
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
$.ajax({
method: 'POST',
url: 'api/user/create.php',
data: {
name: name,
email: email
},
success: function(response) {
showUsers();
Swal.fire({
title: 'Success',
text: 'User created successfully',
icon: 'success',
confirmButtonText: 'OK'
});
},
error: function(xhr, status, error) {
console.log(xhr);
console.log(status);
console.log(error);
}
});
});
// 显示编辑用户表单
$('#user-list').on('click', '.edit-user-button', function() {
var id = $(this).data('id');
var name = $(this).data('name');
var email = $(this).data('email');
$('input[name="id"]').val(id);
$('input[name="name"]').val(name);
$('input[name="email"]').val(email);
$('#edit-user-form').show();
});
// 更新用户
$('#edit-user-form').submit(function(e) {
e.preventDefault();
var id = $('input[name="id"]').val();
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
$.ajax({
method: 'POST',
url: 'api/user/update.php',
data: {
id: id,
name: name,
email: email
},
success: function(response) {
showUsers();
Swal.fire({
title: 'Success',
text: 'User updated successfully',
icon: 'success',
confirmButtonText: 'OK'
});
},
error: function(xhr, status, error) {
console.log(xhr);
console.log(status);
console.log(error);
}
});
});
// 删除用户
$('#user-list').on('click', '.delete-user-button', function() {
var id = $(this).data('id');
$.ajax({
method: 'POST',
url: 'api/user/delete.php',
data: {
id: id
},
success: function(response) {
showUsers();
Swal.fire({
title: 'Success',
text: 'User deleted successfully',
icon: 'success',
confirmButtonText: 'OK'
});
},
error: function(xhr, status, error) {
console.log(xhr);
console.log(status);
console.log(error);
}
});
});
// 显示用户列表
function showUsers() {
$.ajax({
method: 'GET',
url: 'api/user/read.php',
success: function(response) {
var users = JSON.parse(response);
var html = '';
users.forEach(function(user) {
html += '<tr>';
html += '<td>' + user.id + '</td>';
html += '<td>' + user.name + '</td>';
html += '<td>' + user.email + '</td>';
html += '<td>';
html += '<button class="edit-user-button" data-id="' + user.id + '" data-name="' + user.name + '" data-email="' + user.email + '">Edit</button>';
html += '<button class="delete-user-button" data-id="' + user.id + '">Delete</button>';
html += '</td>';
html += '</tr>';
});
$('#user-list').html(html);
},
error: function(xhr, status, error) {
console.log(xhr);
console.log(status);
console.log(error);
}
});
}
});
```
PHP 代码：
```
// api/user/create.php
<?php
header('Content-Type: application/json');
// 连接数据库
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'example';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die('Connection failed: ' . $conn->connect_error);
}
// 获取 POST 数据
$name = $_POST['name'];
$email = $_POST['email'];
// 插入数据
$sql = 'INSERT INTO users (name, email) VALUES ("' . $name . '", "' . $email . '")';
if ($conn->query($sql) === TRUE) {
echo json_encode(array('message' => 'User created successfully'));
} else {
echo json_encode(array('error' => 'Error: ' . $sql . '<br>' . $conn->error));
}
$conn->close();
?>
// api/user/read.php
<?php
header('Content-Type: application/json');
// 连接数据库
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'example';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die('Connection failed: ' . $conn->connect_error);
}
// 查询数据
$sql = 'SELECT * FROM users';
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$users = array();
while($row = $result->fetch_assoc()) {
$users[] = $row;
}
echo json_encode($users);
} else {
echo json_encode(array('message' => 'No users found'));
}
$conn->close();
?>
// api/user/update.php
<?php
header('Content-Type: application/json');
// 连接数据库
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'example';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die('Connection failed: ' . $conn->connect_error);
}
// 获取 POST 数据
$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];
// 更新数据
$sql = 'UPDATE users SET name = "' . $name . '", email = "' . $email . '" WHERE id = ' . $id;
if ($conn->query($sql) === TRUE) {
echo json_encode(array('message' => 'User updated successfully'));
} else {
echo json_encode(array('error' => 'Error: ' . $sql . '<br>' . $conn->error));
}
$conn->close();
?>
// api/user/delete.php
<?php
header('Content-Type: application/json');
// 连接数据库
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'example';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die('Connection failed: ' . $conn->connect_error);
}
// 获取 POST 数据
$id = $_POST['id'];
// 删除数据
$sql = 'DELETE FROM users WHERE id = ' . $id;
if ($conn->query($sql) === TRUE) {
echo json_encode(array('message' => 'User deleted successfully'));
} else {
echo json_encode(array('error' => 'Error: ' . $sql . '<br>' . $conn->error));
}
$conn->close();
?>
```
以上代码实现了使用 AJAX 和 jQuery 进行增删改查操作。其中，HTML 代码定义了用户列表和添加、编辑用户的表单，JavaScript 代码通过 AJAX 发送请求实现增删改查操作，PHP 代码处理请求并与数据库交互。同时，使用了 SweetAlert2 库来显示操作结果的提示框。
相关推荐
最新推荐
AJAX实现数据的增删改查操作详解【java后台】
本文将深入讲解如何使用AJAX结合Java后台实现数据的增删改查操作，这对于构建动态、交互性强的Web应用至关重要。 首先，我们从HTML界面开始。在这个例子中，我们有四个主要的操作按钮：插入（Insert）、查询（Query...
BootStrap实现带有增删改查功能的表格(DEMO详解)
在本文中，我们将探讨如何使用BootStrap实现一个具有增删改查功能的表格。BootStrap是一个流行的前端开发框架，它提供了一套简洁且响应式的组件，使得网页设计和开发变得更加高效。在表格的实现上，BootStrap默认的...
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
jQ Ajax + PHP + MySQL 实现关键字模糊查询 jQ Ajax 是一种流行的 JavaScript 库，用来简化 Ajax 编程。PHP 是一种服务器端脚本语言，常用于 Web 开发。MySQL 是一种关系型数据库管理系统，常用于存储和管理数据。...
jQuery+ajax实现批量删除功能完整示例
本示例将详细讲解如何利用jQuery和ajax技术来实现这一功能，同时结合bootstrap框架和layer.js插件提升用户体验。 首先，批量删除的核心在于用户通过勾选复选框选择待删除的项。在提供的代码片段中，我们看到每个...
基于stm32+FreeRTOS+ESP8266的实时天气系统
【作品名称】：基于stm32+FreeRTOS+ESP8266的实时天气系统
【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
【项目介绍】：项目简介
基于stm32F407+FreeRTOS+ESP8266的实时气象站系统，通过物联网技术实时读取天气情况，温度以及自带了一个计时功能。
所需设备
stm32F407，淘晶驰串口屏，ESP8266；
串口屏连接串口3，ESP8266连接串口2，串口1用于打印状态。
实现过程
通过对ESP8266发送AT指令，从服务器读取天气的json数据，然后通过cJSON解码数据，最后FreeRTOS对任务进行管理（FreeRTOS和cJSON有冲突，需要将cJSON申请内存空间的函数替换成FreeRTOS申请内存的函数，每次解码后，一定要释放内存，否则解码会卡死，而且需要把Heap_size设置稍微大一点，推荐设置为4096）
基于嵌入式ARMLinux的播放器的设计与实现 word格式.doc
本文主要探讨了基于嵌入式ARM-Linux的播放器的设计与实现。在当前PC时代，随着嵌入式技术的快速发展，对高效、便携的多媒体设备的需求日益增长。作者首先深入剖析了ARM体系结构，特别是针对ARM9微处理器的特性，探讨了如何构建适用于嵌入式系统的嵌入式Linux操作系统。这个过程包括设置交叉编译环境，优化引导装载程序，成功移植了嵌入式Linux内核，并创建了适合S3C2410开发板的根文件系统。
在考虑到嵌入式系统硬件资源有限的特点，通常的PC机图形用户界面（GUI）无法直接应用。因此，作者选择了轻量级的Minigui作为研究对象，对其实体架构进行了研究，并将其移植到S3C2410开发板上，实现了嵌入式图形用户界面，使得系统具有简洁而易用的操作界面，提升了用户体验。
文章的核心部分是将通用媒体播放器Mplayer移植到S3C2410开发板上。针对嵌入式环境中的音频输出问题，作者针对性地解决了Mplayer播放音频时可能出现的不稳定性，实现了音乐和视频的无缝播放，打造了一个完整的嵌入式多媒体播放解决方案。
论文最后部分对整个项目进行了总结，强调了在嵌入式ARM-Linux平台上设计播放器所取得的成果，同时也指出了一些待改进和完善的方面，如系统性能优化、兼容性提升以及可能的扩展功能等。关键词包括嵌入式ARM-Linux、S3C2410芯片、Mplayer多媒体播放器、图形用户界面（GUI）以及Minigui等，这些都反映出本文研究的重点和领域。
通过这篇论文，读者不仅能了解到嵌入式系统与Linux平台结合的具体实践，还能学到如何在资源受限的环境中设计和优化多媒体播放器，为嵌入式技术在多媒体应用领域的进一步发展提供了有价值的经验和参考。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
Python字符串为空判断的动手实践：通过示例掌握技巧
# 1. Python字符串为空判断的基础理论
字符串为空判断是Python编程中一项基本且重要的任务。它涉及检查字符串是否为空（不包含任何字符），这在
box-sizing: border-box;作用是？
`box-sizing: border-box;` 是 CSS 中的一个样式属性，它改变了元素的盒模型行为。默认情况下，浏览器会计算元素内容区域（content）、内边距（padding）和边框（border）的总尺寸，也就是所谓的"标准盒模型"。而当设置为 `box-sizing: border-box;` 后，元素的总宽度和高度会包括内容、内边距和边框的总空间，这样就使得开发者更容易控制元素的实际布局大小。
具体来说，这意味着：
1. 内容区域的宽度和高度不会因为添加内边距或边框而自动扩展。
2. 边框和内边距会从元素的总尺寸中减去，而不是从内容区域开始计算。
经典：大学答辩通过_基于ARM微处理器的嵌入式指纹识别系统设计.pdf
本文主要探讨的是"经典：大学答辩通过_基于ARM微处理器的嵌入式指纹识别系统设计.pdf"，该研究专注于嵌入式指纹识别技术在实际应用中的设计和实现。嵌入式指纹识别系统因其独特的优势——无需外部设备支持，便能独立完成指纹识别任务，正逐渐成为现代安全领域的重要组成部分。
在技术背景部分，文章指出指纹的独特性（图案、断点和交叉点的独一无二性）使其在生物特征认证中具有很高的可靠性。指纹识别技术发展迅速，不仅应用于小型设备如手机或门禁系统，也扩展到大型数据库系统，如连接个人电脑的桌面应用。然而，桌面应用受限于必须连接到计算机的条件，嵌入式系统的出现则提供了更为灵活和便捷的解决方案。
为了实现嵌入式指纹识别，研究者首先构建了一个专门的开发平台。硬件方面，详细讨论了电源电路、复位电路以及JTAG调试接口电路的设计和实现，这些都是确保系统稳定运行的基础。在软件层面，重点研究了如何在ARM芯片上移植嵌入式操作系统uC/OS-II，这是一种实时操作系统，能够有效地处理指纹识别系统的实时任务。此外，还涉及到了嵌入式TCP/IP协议栈的开发，这是实现系统间通信的关键，使得系统能够将采集的指纹数据传输到远程服务器进行比对。
关键词包括：指纹识别、嵌入式系统、实时操作系统uC/OS-II、TCP/IP协议栈。这些关键词表明了论文的核心内容和研究焦点，即围绕着如何在嵌入式环境中高效、准确地实现指纹识别功能，以及与外部网络的无缝连接。
这篇论文不仅深入解析了嵌入式指纹识别系统的硬件架构和软件策略，而且还展示了如何通过结合嵌入式技术和先进操作系统来提升系统的性能和安全性，为未来嵌入式指纹识别技术的实际应用提供了有价值的研究成果。