jQuery AJAX请求成功后返回整个HTML页面的问题求助

我有一个包含导航栏与模态表单的管理面板，通过AJAX提交模态表单后，收到的响应是整个HTML页面内容（包含导航栏、侧边栏等布局），而非预期的PHP处理后的响应结果。

$("#frmcrtNewExam").on("submit", function (e) {
  e.preventDefault();
  var form = new FormData(this);
  $.ajax({
    type: "POST",
    url: process.php, // 注意：此处缺少引号，应改为"process.php"
    data: form,
    contentType: false,
    async: true,
    cache: false,
    processData: false,
    headers: { "cache-control": "no-cache" }, // dataType: 'json', success: function(response) { console.log(response); }
  });
  return false;
});

<!DOCTYPE html>
<!--Favicons -->
<!--Google Fonts-->
<!-- ======= Header ======= -->
<div class="d-flex align-items-center justify-content-between">
   <a href="index.html" class="logo d-flex align-items-center">
   <img src="assets/img/logo.png" alt="">
   </a>
   <i class="bi bi-list toggle-sidebar-btn"></i>
</div>
<!--End Logo-->
<!--End Header-->
<!-- ======= Sidebar ======= -->
<aside id="sidebar" class="sidebar">
   <ul class="sidebar-nav" id="sidebar-nav">
   <li class="nav-item">
      <a class="nav-link " href="index.php">
      <i class="bi bi-grid"></i>
      <span>Dashboard</span>
      </a>
   </li>
   <!-- End Dashboard Nav -->
   <li class="nav-item">
      <a class="nav-link collapsed" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
      <i class="bi bi-menu-button-wide"></i><span>Students</span><i class="bi bi-chevron-down ms-auto"></i>
      </a>
      <ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
         <li>
            <a href="components-alerts.html">
            <i class="bi bi-circle"></i><span>Register</span>
            </a>
         </li>
         <li>
            <a href="forms-elements.html">
            <i class="bi bi-circle"></i><span>Add New</span>
            </a>
         </li>
      </ul>
      <li class="nav-item">
         <a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
         <i class="bi bi-layout-text-window-reverse"></i><span>Setup</span><i class="bi bi-chevron-down ms-auto"></i>
         </a>
      </li>
   </li>
</aside>
<!--End Sidebar-->

原因分析 #

出现这个问题是因为process.php在处理请求时，没有区分AJAX请求和普通页面请求，直接输出了包含公共布局（导航栏、侧边栏）的完整HTML页面，而非仅返回表单处理的结果。

修复步骤 #

1. 修改PHP处理逻辑，针对AJAX请求返回纯响应 #

在process.php开头添加判断，识别AJAX请求并仅返回必要的JSON结果，终止后续页面内容输出：

<?php
// 检测是否为AJAX请求
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    // 处理表单提交逻辑（根据你的业务需求编写）
    $result = [
        'status' => 'success',
        'msg' => '表单提交成功'
    ];

    // 设置响应头为JSON格式
    header('Content-Type: application/json');
    // 输出JSON结果并终止脚本
    echo json_encode($result);
    exit();
}

// 非AJAX请求时的逻辑（可选，比如跳转到页面或输出完整HTML）
?>

2. 完善前端AJAX代码 #

• 给url参数添加引号，避免变量解析错误
• 恢复dataType: 'json'指定响应格式
• 添加success和error回调，处理响应结果：

$("#frmcrtNewExam").on("submit", function (e) {
  e.preventDefault();
  var form = new FormData(this);
  $.ajax({
    type: "POST",
    url: "process.php", // 补全引号
    data: form,
    contentType: false,
    async: true,
    cache: false,
    processData: false,
    headers: { "cache-control": "no-cache" },
    dataType: 'json', // 指定响应为JSON
    success: function(response) {
      console.log(response);
      // 成功后的处理：比如关闭模态框、提示用户
      if (response.status === 'success') {
        alert(response.msg);
        $('#modalId').modal('hide'); // 替换为你的模态框ID
      }
    },
    error: function(xhr, status, err) {
      console.error('提交失败:', err);
      alert('表单提交出错，请稍后重试');
    }
  });
  return false;
});

内容的提问来源于stack exchange，提问作者Cake Beginner