使用Ajax提交表单后无刷新重置清空表单字段的问题

核心问题 #

1. 后端页面刷新指令无效：insert.php 中的 header("Refresh:0") 是针对普通HTTP请求的刷新逻辑，但你用的是Ajax异步请求，该指令不会作用于当前浏览器窗口，自然无法触发页面刷新清空表单。
2. 前端缺少表单重置逻辑：Ajax请求成功后，你的代码仅弹出提示，没有主动清空表单字段的操作。
3. 后端返回脚本的方式不适配Ajax：后端直接输出 <script> 标签的方式，在Ajax场景下不会自动执行（除非手动注入页面），且和前端的提示逻辑重复。

修正步骤 #

1. 重构后端 insert.php，改用JSON返回结果

将后端响应改为标准JSON格式，方便前端处理成功/失败状态：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    include "connect.php";

    $name = $_POST["name"];
    $email = $_POST["email"];
    $message = $_POST["message"];

    $stmt = $conn->prepare("INSERT INTO contacts (name, email, message) VALUES (?, ?, ?)");
    $stmt->bind_param("sss", $name, $email, $message);
    $stmt->execute();

    $response = [];
    if ($stmt->affected_rows > 0) {
        $response['status'] = 'success';
        $response['message'] = 'Your message was successfully submitted!';
    } else {
        $response['status'] = 'error';
        $response['message'] = 'Sorry, an error occurred while submitting your message. Please try again later.';
    }

    $stmt->close();
    header('Content-Type: application/json');
    echo json_encode($response);
}
?>

2. 修改前端Ajax逻辑，添加表单重置

优化前端代码，用表单序列化简化数据收集，并在请求成功后调用原生reset()方法清空表单：

<script>
    $(document).ready(function(){
      $('#contact-form').submit(function(e){
        e.preventDefault();
        
        const $form = $(this);
        
        $.ajax({
          type: 'POST',
          url: 'insert.php',
          data: $form.serialize(), // 自动序列化所有表单数据
          dataType: 'json', // 指定接收JSON格式响应
          success: function(response){
            alert(response.message);
            $form[0].reset(); // 调用原生DOM方法一键重置表单
          },
          error: function(){
            alert('An error occurred while submitting the form.');
          }
        });
      });
    });
</script>

关键说明 #

• $form[0].reset()：把jQuery对象转为原生DOM元素后，调用reset()方法可一次性清空所有表单字段，比手动逐个设置val('')更高效。
• form.serialize()：自动收集表单内所有输入字段的数据，避免手动获取每个值的冗余代码，提升可维护性。
• JSON响应：前后端通过结构化数据通信，比输出脚本标签更规范，也方便后续扩展更多业务逻辑。

内容的提问来源于stack exchange，提问作者Paul Hagi