本教程旨在解决javascript使用fetch api发送`application/x-www-form-urlencoded`类型post请求时，php后端无法正确接收数据的问题。核心在于php脚本错误地从url查询字符串中解析数据。我们将详细介绍如何利用`$_post`超全局变量正确访问post数据，并提供修正后的javascript和php代码示例，同时强调数据安全和sql注入防护的重要性。
理解POST数据传输机制
在Web开发中，客户端（如浏览器中的javaScript）通过http请求与服务器进行数据交互。fetch API是现代javascript中用于发起网络请求的强大工具。当使用POST方法时，请求体（Request Body）是承载要发送到服务器的数据的主要部分。
Content-Type: application/x-www-form-urlencoded是一种常见的MIME类型，它指示请求体中的数据是以URL编码的键值对形式（例如param1=value1¶m2=value2）发送的。这种格式类似于html表单的默认提交方式。
对于PHP服务器端，当接收到Content-Type为application/x-www-form-urlencoded的POST请求时，PHP会自动解析请求体中的数据，并将这些键值对填充到$_POST超全局数组中。这意味着，开发者可以直接通过$_POST[‘key’]的形式访问客户端发送的数据。
问题分析：为什么PHP收不到数据？
原始的PHP代码尝试通过$_SERVER[‘REQUEST_URI’]获取当前请求的完整URL，然后使用parse_url函数解析URL的各个部分，最后通过parse_str函数从URL的查询字符串（$parts[‘query’]）中提取数据。
立即学习“PHP免费学习笔记（深入）”；
这种处理方式是针对GET请求参数的典型做法，例如访问http://example.com/add.php?name=test&contact=123时，name和contact会出现在URL的查询字符串中。然而，对于POST请求，尤其是当数据放在请求体中发送时，这些数据并不会出现在URL的查询字符串中。因此，尝试从URL中解析POST请求体的数据是无效的，导致PHP脚本无法获取到预期的参数，从而返回undefined或空值。
正确的做法是利用PHP提供的$_POST超全局变量，它专门用于收集HTTP POST方法提交的数据。
解决方案：正确接收POST数据
解决此问题的核心在于将PHP脚本中获取数据的方式从解析URL查询字符串改为直接使用$_POST超全局变量。
JavaScript客户端代码
原始的JavaScript代码使用fetch API发送application/x-www-form-urlencoded格式的数据是正确的，无需修改。它将数据编码为name=value&…的形式并放入请求体中。
function insertNewRecord(data) { fetch('/configs/database/add.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `name=${data.name}&contact=${data.contact}&delivery=${data.delivery}&value=${data.value}` }) .then(function(response) { if (response.ok) { return response.text(); // 或者 response.json() 如果服务器返回json } throw new Error('请求失败。'); }) .then(result => { console.log('服务器响应:', result); // 根据服务器响应更新UI或显示消息 }) .catch(error => console.error('Fetch操作发生错误:', error)); // 以下是更新客户端UI的代码，与数据发送逻辑分离 var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0]; var newRow = table.insertRow(table.length); cell1 = newRow.insertCell(0); cell1.innerHTML = data.name; cell2 = newRow.insertCell(1); cell2.innerHTML = data.contact; cell3 = newRow.insertCell(2); cell3.innerHTML = data.delivery; cell4 = newRow.insertCell(3); cell4.innerHTML = data.value; cell4 = newRow.insertCell(4); cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a> <a onClick="onDelete(this)">Delete</a>`; }PHP服务端代码修正与最佳实践
核心修改是直接使用$_POST来获取数据。同时，为了确保应用程序的安全性和健壮性，我们必须引入预处理语句（Prepared Statements）来防止SQL注入攻击，并添加适当的错误处理和响应机制。
<?php // 假设 OpenCon() 数据库连接函数定义在单独的文件中 // 例如：db_connection.php // require_once 'db_connection.php'; // 示例 OpenCon() 函数，实际应用中应更完善 function OpenCon() { $dbhost = "localhost"; $dbuser = "root"; $dbpass = "your_password"; // 请替换为您的数据库密码 $db = "your_database"; // 请替换为您的数据库名称 // 创建数据库连接 $conn = new mysqli($dbhost, $dbuser, $dbpass, $db); // 检查连接是否成功 if ($conn->connect_error) { // 在生产环境中，不应直接暴露错误信息 error_log("数据库连接失败: " . $conn->connect_error); http_response_code(500); // internal Server Error echo json_encode(['status' => 'error', 'message' => '数据库连接失败，请稍后再试。']); exit(); } // 设置字符集，防止中文乱码 $conn->set_charset("utf8mb4"); return $conn; } // 设置响应头为JSON，告知客户端响应内容类型 header('Content-Type: application/json'); // 检查请求方法是否为POST，并且 $_POST 数组不为空 if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST)) { // 从 $_POST 数组中获取数据 // 使用 ?? 运算符提供默认值，防止未定义索引警告 $name = $_POST['name'] ?? ''; $contact = $_POST['contact'] ?? ''; $delivery = $_POST['delivery'] ?? ''; $value = $_POST['value'] ?? ''; // 数据验证（根据实际需求添加更严格的验证逻辑） if (empty($name) || empty($contact) || empty($delivery) || empty($value)) { http_response_code(400); // Bad Request echo json_encode(['status' => 'error', 'message' => '缺少必要的字段。']); exit(); } $conn = OpenCon(); // 获取数据库连接 // 使用预处理语句防止SQL注入 $sql = "INSERT INTO users (name, contact, delivery, value) VALUES (?, ?, ?, ?)"; $stmt = $conn->prepare($sql); if ($stmt) { // 绑定参数 // 'ssss' 表示四个参数都是字符串类型 (string, string, string, string) // 根据实际数据类型调整：i (integer), d (double), b (blob) $stmt->bind_param('ssss', $name, $contact, $delivery, $value); // 执行语句 if ($stmt->execute()) { http_response_code(200); // OK echo json_encode(['status' => 'success', 'message' => '记录插入成功。']); } else { // 记录详细错误信息到日志，不直接暴露给客户端 error_log("插入记录失败: " . $stmt->error); http_response_code(500); // Internal Server Error echo json_encode(['status' => 'error', 'message' => '插入记录失败，请稍后再试。']); } $stmt->close(); // 关闭预处理语句 } else { // 记录详细错误信息到日志 error_log("准备SQL语句失败: " . $conn->error); http_response_code(500); // Internal Server Error echo json_encode(['status' => 'error', 'message' => '服务器内部错误，请稍后再试。']); } $conn->close(); // 关闭数据库连接 } else { // 处理非POST请求或没有POST数据的情况 http_response_code(405); // Method Not Allowed echo json_encode(['status' => 'error', 'message' => '无效的请求方法或没有POST数据。']); } ?>注意事项：
- SQL注入防护： 修正后的PHP代码使用了mysqli的预处理语句（prepare()和bind_param()）。这是防止SQL注入攻击的关键措施，因为它将SQL查询结构与用户输入数据分离，确保用户输入不会被解释为SQL代码。
- 数据验证： 在服务器端接收到数据后，务必进行严格的数据验证（例如检查数据类型、长度、格式等）。示例代码中仅做了基本的empty()检查，实际应用中应更全面。
- 错误处理与日志： 生产环境中的代码应包含完善的错误处理机制。当发生错误时，应记录详细的错误信息到服务器日志，并向客户端返回友好的错误提示，避免暴露敏感的系统信息。
- HTTP状态码： 根据请求处理结果返回正确的HTTP状态码（如200 OK, 400 Bad Request, 405 Method Not Allowed, 500 Internal Server Error），有助于客户端理解请求结果。
- JSON响应： 现代Web API通常返回JSON格式的响应，便于客户端（特别是JavaScript）解析和处理。
总结
当JavaScript客户端通过fetch API发送application/x-www-form-urlencoded类型的POST请求时，PHP服务端应通过$_POST超全局变量来访问请求体中的数据，而非从URL查询字符串中解析。同时，为了构建安全、健壮的Web应用程序，务必采用预处理语句来防范SQL注入，并实施全面的数据验证和错误处理机制。遵循这些最佳实践，可以有效解决前后端数据传输问题，并提升应用程序的安全性和可靠性。