如何通过 JavaScript 向 PHP 安全发送 JSON 数据-php教程-PHP中文网

如何通过 JavaScript 向 PHP 安全发送 JSON 数据

本文详解如何正确将前端生成的 json 数据（如 excel 解析结果）通过 fetch 提交至 php 后端，并解决常见接收失败问题，涵盖 blob 封装、formdata 使用、php 端数据解析及路径配置要点。

本文详解如何正确将前端生成的 json 数据（如 excel 解析结果）通过 fetch 提交至 php 后端，并解决常见接收失败问题，涵盖 blob 封装、formdata 使用、php 端数据解析及路径配置要点。

在 Web 开发中，将前端处理后的 JSON 数据（例如通过 SheetJS 将 Excel 文件解析为 JSON 数组）提交给 PHP 进行数据库存储，是一个典型的数据流转场景。但若 PHP 无法接收到数据，往往并非逻辑错误，而是请求构造或服务端配置存在疏漏。以下为完整、可落地的解决方案。

✅ 正确的前端发送方式（修正版）

原代码中存在多个关键问题：

data.data 是无效属性（FormData 实例无 .data 属性）；
使用 Blob + FormData 时，PHP 默认不会自动解析其内容为 $_POST，需手动读取原始输入；
缺少错误处理与响应解析；
路径未明确，易因相对路径错误导致请求 404。

推荐两种更健壮的方案：

方案一：直接发送 JSON 字符串（推荐，简洁清晰）

function testBud(dt1) {
  const jsonData = JSON.stringify(dt1);

  fetch("./public/model/importBud.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: jsonData
  })
    .then(resp => {
      if (!resp.ok) throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
      return resp.text(); // 或 resp.json()，取决于 PHP 返回格式
    })
    .then(data => console.log("Success:", data))
    .catch(err => console.error("Error:", err));
}

✅ 优势：语义明确、PHP 可直接 json_decode(file_get_contents('php://input')) 获取；避免 FormData 的 MIME 复杂性。

Json Schema Toolkit
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

方案二：使用 FormData（兼容文件混合上传场景）

若后续需同时上传文件与 JSON，可保留 FormData，但需调整 PHP 接收逻辑：

function testBud(dt1) {
  const jsonData = JSON.stringify(dt1);
  const formData = new FormData();
  formData.append("json_data", jsonData); // 普通字段名，非 Blob

  fetch("./public/model/importBud.php", {
    method: "POST",
    body: formData
  })
  // ... 同上处理响应
}

✅ PHP 端正确接收逻辑

⚠️ 关键注意：

若前端用 Content-Type: application/json，PHP 不会自动填充 $_POST —— 必须读取原始输入流；
若前端用 FormData（默认 multipart/form-data），则数据在 $_POST['json_data'] 中，无需额外解析。

对应两种前端方式的 PHP 处理：

<?php // 方案一：接收 application/json 请求
if (isset($_SERVER['CONTENT_TYPE']) && strpos($_SERVER['CONTENT_TYPE'], 'application/json') !== false) {
    $raw = file_get_contents('php://input');
    $data = json_decode($raw, true);
    if (json_last_error() === JSON_ERROR_NONE && is_array($data)) {
        echo "✅ JSON received: " . count($data) . " records";
        // ✅ 此处可执行数据库插入等操作
    } else {
        http_response_code(400);
        echo "❌ Invalid JSON";
    }
} 
// 方案二：接收 FormData（默认）
elseif (!empty($_POST['json_data'])) {
    $data = json_decode($_POST['json_data'], true);
    if (json_last_error() === JSON_ERROR_NONE && is_array($data)) {
        echo "✅ FormData JSON received";
    } else {
        echo "❌ Invalid JSON in POST";
    }
} 
else {
    echo "❌ No data received";
}
?>

? 其他必要检查项

路径问题：确保 ./public/model/importBud.php 路径真实存在，且 Web 服务器（如 Apache/Nginx）已将 public/ 设为根目录或正确配置了路由；

CORS 配置（开发环境）：若跨域，PHP 需添加响应头：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");

浏览器控制台调试：检查 Network 标签页中请求是否发出、状态码是否为 200、Payload 是否含有效 JSON；
Excel 解析验证：在 testBud(jsonObj) 前加 console.log(Array.isArray(jsonObj), jsonObj?.length)，确保 jsonObj 是有效数组。

✅ 总结

发送 JSON 到 PHP 的核心原则是：前后端传输格式与解析方式必须严格匹配。优先推荐 application/json + php://input 方式，语义清晰、调试简单；若需与文件共存，则使用 FormData 并统一通过 $_POST 字段传递 JSON 字符串。切勿依赖 $_POST 接收原生 JSON 请求体——这是最常见的“收不到数据”根源。

php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！