如何使用 jQuery AJAX 无刷新提交表单并存入 MySQL 数据库-php教程-PHP中文网

如何使用 jQuery AJAX 无刷新提交表单并存入 MySQL 数据库

本文详解如何通过 jQuery 的 $.ajax()（而非 $.post()）实现 HTML 表单无刷新提交、PHP 安全插入 MySQL 数据，并实时刷新显示结果，涵盖防重复提交、错误处理、预处理语句防注入等关键实践。

本文详解如何通过 jquery 的 `$.ajax()`（而非 `$.post()`）实现 html 表单无刷新提交、php 安全插入 mysql 数据，并实时刷新显示结果，涵盖防重复提交、错误处理、预处理语句防注入等关键实践。

在 Web 开发中，避免页面刷新的异步数据提交是提升用户体验的核心需求。原问题中使用 $.post() + event.preventDefault() 的思路正确，但存在几个关键缺陷导致数据未写入数据库：form.php 中未校验 $_POST 是否真正包含表单字段（仅检查 $_POST['submit']，而 $.post() 序列化后并不发送 submit 字段）；form.php 缺少明确的响应返回，前端无法判断操作成败；且 show.php 被直接 .load() 加载，但未确保插入已成功执行完毕（存在竞态风险）。

以下是经过生产验证的完整解决方案，采用模块化设计、严格错误处理与安全实践：

MySQL

编写正确的MySQL查询，避免字符集、索引和锁方面的常见陷阱。

下载

✅ 正确流程设计

前端点击按钮 → 触发 $.ajax() 发送结构化数据
后端 save.php 接收、校验、用预处理语句插入 MySQL
返回标准化 JSON 响应（含 statusCode）
前端根据响应状态更新 UI 并加载最新数据

? 前端 HTML + JavaScript（index.php）



  <title>AJAX 表单提交</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><div class="container mt-5" style="max-width: 600px;">
    <div class="alert alert-success d-none" id="successAlert">
      <strong>✅ 成功！</strong> 数据已保存。
    </div>
    <div class="alert alert-danger d-none" id="errorAlert"></div>

    <form id="contactForm">
      <div class="mb-3">
        <label class="form-label">姓名</label>
        <input type="text" class="form-control" name="name" required>
</div>
      <div class="mb-3">
        <label class="form-label">邮箱</label>
        <input type="email" class="form-control" name="email" required>
</div>
      <div class="mb-3">
        <label class="form-label">消息</label>
        <textarea class="form-control" name="msg" rows="4" required></textarea>
</div>
      <button type="submit" class="btn btn-primary" id="submitBtn">发送消息</button>
    </form>

    <div class="mt-4">
      <h5>已提交记录：</h5>
      <div id="recordList">正在加载...</div>
    </div>
  </div>

  <script>
  $(document).ready(function() {
    $('#contactForm').on('submit', function(e) {
      e.preventDefault(); // 阻止默认提交

      const formData = $(this).serialize(); // 自动编码为 key=value&...
      $('#submitBtn').prop('disabled', true).text('提交中...');

      $.ajax({
        url: 'save.php',
        type: 'POST',
        data: formData,
        dataType: 'json',
        timeout: 5000,
        success: function(res) {
          if (res.statusCode === 200) {
            $('#successAlert').removeClass('d-none').fadeIn();
            $('#errorAlert').addClass('d-none');
            $('#contactForm')[0].reset(); // 清空表单
            $('#recordList').load('show.php'); // 安全加载最新数据
          } else {
            throw new Error(res.message || '服务器返回异常');
          }
        },
        error: function(xhr, status, err) {
          let msg = '提交失败';
          if (status === 'timeout') msg = '请求超时，请检查网络';
          else if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;
          $('#errorAlert')
            .removeClass('d-none')
            .find('.alert-body').text(msg).end()
            .fadeIn();
        },
        complete: function() {
          $('#submitBtn').prop('disabled', false).text('发送消息');
        }
      });
    });
  });
  </script>

⚙️ 后端处理（save.php）

<?php header('Content-Type: application/json; charset=utf-8');
require_once 'database.php'; // 统一连接管理

// 输入过滤与基础校验
$name  = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
$msg   = filter_input(INPUT_POST, 'msg', FILTER_SANITIZE_FULL_SPECIAL_CHARS);

if (empty($name) || empty($email) || empty($msg)) {
  echo json_encode(['statusCode' => 400, 'message' => '请填写所有必填字段']);
  exit;
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo json_encode(['statusCode' => 400, 'message' => '邮箱格式不正确']);
  exit;
}

try {
  $stmt = $con->prepare("INSERT INTO contactform_entries (name_fld, email_fld, msg_fld) VALUES (?, ?, ?)");
  $stmt->bind_param("sss", $name, $email, $msg);
  $stmt->execute();

  echo json_encode(['statusCode' => 200]);
} catch (mysqli_sql_exception $e) {
  error_log("DB Insert failed: " . $e->getMessage());
  echo json_encode(['statusCode' => 500, 'message' => '数据库写入失败，请稍后重试']);
} finally {
  $stmt->close();
  $con->close();
}

?️ 数据库连接（database.php）

<?php $host = 'localhost';
$user = 'user';
$pass = 'GoTn_1290'; // 生产环境请使用环境变量或配置文件
$db   = 'form_entriesdb';

$con = new mysqli($host, $user, $pass, $db);
if ($con->connect_error) {
  die(json_encode(['statusCode' => 500, 'message' => '数据库连接失败']));
}
$con->set_charset('utf8mb4'); // 强制 UTF-8 支持中文

? 数据展示（show.php）

<?php require_once 'database.php';

$sql = "SELECT id, name_fld, email_fld, msg_fld, created_at FROM contactform_entries ORDER BY id DESC LIMIT 10";
$result = $con->query($sql);

if ($result && $result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    echo '<div class="card mb-2 p-3">';
    echo '<strong>' . htmlspecialchars($row['name_fld']) . '</strong> <br>';
    echo '<small class="text-muted">' . htmlspecialchars(substr($row['msg_fld'], 0, 60)) . '...</small><br>';
    echo '<small class="text-secondary">ID#' . $row['id'] . ' · ' . date('m-d H:i', strtotime($row['created_at'])) . '</small>';
    echo '</div>';
  }
} else {
  echo '<div class="text-muted">暂无数据</div>';
}
$result->free();
$con->close();