第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）

以下是使用jQuery和AJAX实现增删改查及分页显示功能的示例代码：

HTML部分：

<div id="content">
  <!-- 用于显示数据的表格 -->
  <table id="data-table">
    <!-- 表头 -->
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Action</th>
      </tr>
    </thead>
    <!-- 表身，动态插入数据行 -->
    <tbody>
      <!-- 数据行将被插入此处 -->
    </tbody>
  </table>
  <!-- 分页控件 -->
  <div id="pagination"></div>
</div>

JavaScript部分 (jQuery + AJAX)：

$(document).ready(function() {
  // 初始加载数据和分页
  loadData(1);
 
  // 分页点击事件
  $('#pagination').on('click', 'a', function(e) {
    e.preventDefault();
    loadData($(this).data('page'));
  });
 
  // 添加数据
  $('#add-form').on('submit', function(e) {
    e.preventDefault();
    addData($(this).serialize());
  });
 
  // 删除数据
  $('#data-table').on('click', '.delete', function() {
    deleteData($(this).data('id'));
  });
 
  // 更新数据
  $('#data-table').on('click', '.edit', function() {
    editData($(this).data('id'));
  });
 
  // 提交更新后的数据
  $('#update-form').on('submit', function(e) {
    e.preventDefault();
    updateData($(this).serialize());
  });
});
 
// 加载数据和分页信息
function loadData(page) {
  $.ajax({
    url: 'get-data.php',
    type: 'GET',
    data: { page: page },
    success: function(response) {
      var data = JSON.parse(response);
      // 更新表格内容
      $('#data-table tbody').html(data.table);
      // 更新分页控件
      $('#pagination').html(data.pagination);
    }
  });
}
 
// 添加数据
function addData(data) {
  $.ajax({
    url: 'add-data.php',
    type: 'POST',
    data: data,
    success: function(response) {
      loadData(1); // 重新加载第一页数据
    }
  });
}
 
// 删除数据
function deleteData(id) {
  $.ajax({
    url: 'delete-data.php',
    type: 'POST',
    data: { id: id },
    success: function() {
      loadData($('#pagination .active a').data('page'));
    }
  });
}
 
// 编辑数据
function editData(id) {
  // 弹出编辑框或者跳转到编辑页面
  // ...
}
 
// 更新数据
function updateData(data) {
  $.ajax({
    url: 'update-data.php',
    type: 'POST',
    data: data,
    success: function() {
      loadData($('#pagination .active a').data('page'));
    }
  });
}

PHP部分 (处理AJAX请求)：

// get-data.php
$page = $_GET['page'];
// 构造数据源，查询数据库并分页
// ...
$data = array(
  'table' => '<tr>...</tr>', // 生成的表格行
  'pagination' => '<a href="#">...</a>' // 生成的分页链接
);
echo json_encode($data);
 
// add-data.php
$name = $_POST['name'];
$age = $_P