【jquery Ajax 练习】图书管理
以下是一个简化的jQuery Ajax实现来删除图书的例子:
HTML部分:
<ul id="books">
<li data-id="1">书籍1</li>
<li data-id="2">书籍2</li>
<!-- ...更多书籍... -->
</ul>
JavaScript部分(jQuery):
$(document).ready(function() {
$('#books').on('click', 'li', function() {
var bookId = $(this).data('id');
var request = $.ajax({
url: 'delete_book.php',
type: 'POST',
data: { id: bookId }
});
request.done(function(response, textStatus, jqXHR) {
if(response.status === 'success') {
$(this).remove(); // 从列表中移除已删除的书籍
} else {
alert('删除失败: ' + response.message);
}
});
request.fail(function(jqXHR, textStatus, errorThrown) {
alert('请求失败: ' + textStatus);
});
});
});
PHP部分 (delete_book.php
):
<?php
$response = array('status' => 'error', 'message' => '删除失败');
if(!empty($_POST['id'])) {
// 假设有一个删除图书的函数deleteBook()
if(deleteBook($_POST['id'])) {
$response['status'] = 'success';
$response['message'] = '删除成功';
}
}
header('Content-Type: application/json');
echo json_encode($response);
?>
这个例子中,我们为每本书籍添加了一个数据属性data-id
,当点击书籍时,会发送一个Ajax请求到delete_book.php
,请求会携带要删除的书籍ID。服务器端的delete_book.php
脚本会处理删除请求,并返回操作结果。客户端JavaScript会根据返回的状态更新页面。
评论已关闭