React Hook通过Ajax请求PHP服务器提交表单无响应问题

问题根因 #

• 函数名拼写错误：提交处理函数名写为handleSumbit（正确拼写应为handleSubmit），当前代码中定义和调用拼写一致所以未触发报错，但属于不规范写法，容易引发后续维护问题。
• 相对路径请求错误：React开发服务默认运行在localhost:3000，表单写相对路径server.php时，请求会发送到http://localhost:3000/server.php，而PHP服务通常运行在Apache/Nginx的80/其他端口，该路径下不存在对应接口，请求会直接404。
• jQuery依赖缺失：绝大多数现代React脚手架（Vite/CRA）默认不集成jQuery，如果没有手动安装引入jQuery，全局$对象不存在，会导致Ajax逻辑直接不执行；如果有其他脚本占用了$变量但没有实现ajax方法，也会出现无报错无响应的情况。
• PHP跨域配置不全：仅配置允许跨域源没有处理OPTIONS预检请求，跨域POST请求可能被浏览器拦截。

修复方案 #

前端代码（推荐去掉jQuery依赖，用原生fetch实现，无需额外依赖） #

import { useState } from 'react';

function App() {
  const [name, setName] = useState("");
  const [result, setResult] = useState("");

  const handleChange = (e) => {
      setName(e.target.value);
  };

  // 修正函数名拼写
  const handleSubmit = (e) => {
      e.preventDefault();
      // 填写PHP服务的完整绝对地址，不要用相对路径
      fetch("http://localhost/server.php", {
          method: "POST",
          headers: {
              "Content-Type": "application/x-www-form-urlencoded",
          },
          // 直接使用React state里的表单数据，无需依赖DOM序列化
          body: new URLSearchParams({ name: name })
      })
      .then(res => res.text())
      .then(data => {
          setResult(data);
      })
      .catch(err => {
          console.error("请求失败:", err);
      });
  };

  return (
      <div>
          <form onSubmit={handleSubmit}>
              <label htmlFor="name">Name: </label>
              <input
                  type="text"
                  id="name"
                  name="name"
                  value={name}
                  onChange={handleChange}
              />
              <br />
              <button type="submit">Submit</button>
          </form>
          <h1>{result}</h1>
      </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('header4'));
root.render(<App />);

注意：如果你的PHP服务不是跑在http://localhost（比如8080端口），要把fetch里的URL替换成PHP接口的实际完整地址。调试时可以打开浏览器开发者工具的「网络」面板，点击提交后查看请求地址、状态码，快速定位是请求没发出去、地址错误还是跨域被拦截。

如果一定要用jQuery的$.ajax，必须先执行npm install jquery安装依赖，再在组件顶部加import $ from 'jquery'才能正常使用。

后端PHP代码（补全跨域配置，处理预检请求） #

<?php
// 补全跨域响应头
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Methods: POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
// 处理浏览器跨域预检请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

$user = $_POST['name'] ?? '';
echo "Hello from server: $user";
?>

内容的提问来源于stack exchange，提问作者Debabratta Jena