如何实现无页面重载向数据库插入数据？附HTML表单及PHP文件

嗨，要实现不刷新页面把表单数据（包括文件）插入数据库，核心是用AJAX发起异步请求，这样页面不用刷新就能完成数据提交。结合你提供的HTML表单，下面是具体的分步实现方案：

前端实现 #

先完善你的HTML表单（补充提交按钮和常规字段示例），再添加JavaScript代码处理AJAX请求：

完整HTML表单示例 #

<form class="form-horizontal" id="form_post" enctype="multipart/form-data">
  <div class="row">
    <div class="form-group col-md-12">
      <label class="col-sm-2" for="uploadedimage">Image :</label>
      <div class="col-sm-7">
        <input type="file" class="btn btn-primary" name="uploadedimage" id="uploadedimage">
      </div>
    </div>
    <!-- 示例：添加任务名字段 -->
    <div class="form-group col-md-12">
      <label class="col-sm-2" for="task_name">Task Name :</label>
      <div class="col-sm-7">
        <input type="text" class="form-control" name="task_name" id="task_name" placeholder="Enter task name">
      </div>
    </div>
    <div class="form-group col-md-12">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-success" id="submit_btn">Submit Task</button>
      </div>
    </div>
  </div>
</form>
<!-- 用来展示提交结果的区域 -->
<div id="response_message"></div>

JavaScript AJAX处理代码 #

这里提供原生JS和jQuery两种方案，你可以根据项目选型选择：

原生JavaScript版本

document.getElementById('submit_btn').addEventListener('click', function(e) {
  e.preventDefault();
  const form = document.getElementById('form_post');
  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();

  xhr.open('POST', 'taskinsert.php', true);
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.success) {
        document.getElementById('response_message').innerHTML = '<div class="alert alert-success">' + response.message + '</div>';
        form.reset(); // 提交成功后重置表单
      } else {
        document.getElementById('response_message').innerHTML = '<div class="alert alert-danger">' + response.message + '</div>';
      }
    } else {
      document.getElementById('response_message').innerHTML = '<div class="alert alert-danger">请求出错，请重试</div>';
    }
  };

  xhr.onerror = function() {
    document.getElementById('response_message').innerHTML = '<div class="alert alert-danger">网络连接失败</div>';
  };

  xhr.send(formData);
});

jQuery版本（如果你在用jQuery）

$('#submit_btn').click(function(e) {
  e.preventDefault();
  const formData = new FormData($('#form_post')[0]);

  $.ajax({
    url: 'taskinsert.php',
    type: 'POST',
    data: formData,
    processData: false, // 禁止处理表单数据，交给FormData处理
    contentType: false, // 不要设置内容类型，FormData会自动生成正确的头部
    success: function(response) {
      const res = JSON.parse(response);
      if (res.success) {
        $('#response_message').html('<div class="alert alert-success">' + res.message + '</div>');
        $('#form_post')[0].reset();
      } else {
        $('#response_message').html('<div class="alert alert-danger">' + res.message + '</div>');
      }
    },
    error: function() {
      $('#response_message').html('<div class="alert alert-danger">请求失败，请检查网络或后端代码</div>');
    }
  });
});

后端实现（taskinsert.php） #

处理前端传来的FormData，完成文件上传和数据库插入逻辑：

<?php
// 替换成你的数据库连接信息
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die(json_encode(['success' => false, 'message' => '数据库连接失败: ' . $conn->connect_error]));
}

// 处理文件上传
$uploadOk = 1;
$targetDir = "uploads/"; // 确保这个目录存在且PHP有写入权限
$fileName = basename($_FILES["uploadedimage"]["name"]);
$targetFilePath = $targetDir . $fileName;
$fileType = strtolower(pathinfo($targetFilePath, PATHINFO_EXTENSION));

// 可选：限制文件类型为图片
$allowedTypes = ['jpg', 'png', 'jpeg', 'gif'];
if (!in_array($fileType, $allowedTypes)) {
  echo json_encode(['success' => false, 'message' => '仅支持JPG、PNG、JPEG、GIF格式的图片']);
  exit;
}

// 执行文件上传
if (move_uploaded_file($_FILES["uploadedimage"]["tmp_name"], $targetFilePath)) {
  // 文件上传成功，插入数据到数据库（用预处理语句防SQL注入）
  $taskName = $_POST['task_name'];
  $stmt = $conn->prepare("INSERT INTO tasks (task_name, image_path) VALUES (?, ?)");
  $stmt->bind_param("ss", $taskName, $targetFilePath);
  
  if ($stmt->execute()) {
    echo json_encode(['success' => true, 'message' => '任务和图片已成功添加']);
  } else {
    echo json_encode(['success' => false, 'message' => '数据库插入失败: ' . $stmt->error]);
  }
  $stmt->close();
} else {
  echo json_encode(['success' => false, 'message' => '文件上传失败，请检查uploads目录权限']);
}

$conn->close();
?>

额外注意事项 #

• 确保uploads/目录存在，可通过chmod 755 uploads/设置正确的写入权限。
• 务必使用预处理语句防止SQL注入，不要直接将用户输入拼接到SQL语句中。
• 可以根据实际需求调整文件类型限制、表单字段和数据库表结构。
• 前端的提示样式可以结合你项目使用的UI框架（比如Bootstrap的alert类）美化。

内容的提问来源于stack exchange，提问作者GUNJAN SHUKLA