本文详解 AJAX 原生 JavaScript 中 XMLHttpRequest 发送 POST 数据时，为何必须将变量拼接为 "key=value" 格式的字符串（如 "fname="+fn），并说明其与 PHP $_POST 超全局数组的映射关系。
本文详解 ajax 原生 javascript 中 `xmlhttprequest` 发送 post 数据时，为何必须将变量拼接为 `"key=value"` 格式的字符串（如 `"fname="+fn`），并说明其与 php `$_post` 超全局数组的映射关系。
在使用原生 JavaScript 实现 AJAX POST 请求时，一个常见却易被忽视的关键点是：请求体（request body）必须符合 application/x-www-form-urlencoded 编码规范——即形如 key1=value1&key2=value2 的 URL 编码字符串。这并非 JavaScript 的语法“魔法”，而是 HTTP 协议与服务端（如 PHP）协同解析数据的约定。
以你的代码为例：
var fn = document.getElementById("fname").value;
var strange = "fname=" + fn; // ✅ 正确：键名为 "fname"，值为用户输入此处 "fname=" + fn 构造的是标准的表单编码键值对。当通过 xm.send(strange) 发送后，PHP 接收到的请求体即为 fname=张三（假设输入为“张三”），此时 $_POST["fname"] 才能准确提取该值。
⚠️ 若改为：
// ❌ 错误：键名不匹配 var strange = "Any text = " + fn; // ❌ 错误：无键名，仅发送纯值 xm.send(fn);
则 PHP 端 $_POST 将为空（或无法通过 "fname" 访问），因为：
-
"Any text = xxx"不是合法键值对（含空格、等号位置错误，且键名非"fname"）； -
xm.send(fn)仅发送纯字符串值，未指定字段名，服务端无法将其映射到$_POST的任意键上。
✅ 正确实践建议：
-
键名需前后端严格一致：HTML 元素的
id（如"fname"）仅用于 DOM 查询，真正决定$_POST键名的是你拼接字符串时左侧的名称（如"fname="中的"fname"）； -
务必进行 URL 编码：用户输入可能含空格、
&、=等特殊字符，应使用encodeURIComponent()防止解析错误：var strange = "fname=" + encodeURIComponent(fn);
-
支持多字段时用
&连接：var ln = document.getElementById("lname").value; var data = "fname=" + encodeURIComponent(fn) + "&lname=" + encodeURIComponent(ln); xm.send(data); -
PHP 端需同步更新键名：若前端改为
"example=" + fn，则 PHP 必须读取$_POST["example"]，而非$_POST["fname"]。
总结："fname="+fn 并非“神秘语法”，而是遵循 HTTP 表单提交规范的必要格式。理解这一机制，才能真正掌握 AJAX 与后端数据交互的本质逻辑——键名是通信契约，字符串拼接是构造契约文本的过程，而 encodeURIComponent 是保障契约鲁棒性的关键步骤。
