Ionic3/Angular ngForm无法提交数据至PHP服务器求助

嘿，我来帮你排查下这个问题！从你的代码来看，主要有两个关键问题导致PHP接收不到POST数据，咱们一步步来修正：

1. Content-Type 拼写错误 #

首先看你服务提供者里的headers配置：

headers: {"content-Type" : "applicaton/x-www-form-urlencoded"}

这里的applicaton少了一个字母i，应该是application！这个拼写错误会让服务器无法识别请求的内容格式，自然解析不了POST数据。

2. Angular Http 默认发送 JSON 格式，而非 form-urlencoded #

即使修正了拼写，Angular的Http.post方法如果直接传对象参数，默认会把它序列化为JSON格式，而PHP的$_POST只能解析application/x-www-form-urlencoded或multipart/form-data格式的数据。所以咱们需要把表单参数转换成URL编码的字符串。

修正后的服务提供者代码 #

首先导入URLSearchParams（Ionic 3对应的Angular版本里这个类是可用的），然后修改dataRegister方法：

// 记得在文件顶部导入
import { URLSearchParams } from '@angular/http';

dataRegister(params){
  // 创建URLSearchParams对象来处理表单数据
  let formData = new URLSearchParams();
  // 遍历传入的参数，添加到formData中
  Object.keys(params).forEach(key => {
    formData.set(key, params[key]);
  });

  return this.http.post(
    this.api+'insert.php',
    formData.toString(), // 转换成URL编码的字符串
    { headers: {"Content-Type" : "application/x-www-form-urlencoded"} }
  ).map((res:Response) => res.json()); // 建议把响应转成JSON格式，方便后续处理
}

额外检查项 #

• PHP端CORS设置：如果你的Ionic应用和PHP服务器不在同一个域名下，需要在PHP文件开头添加跨域允许的头：

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

• 查看请求详情：打开浏览器开发者工具的Network标签，找到这个POST请求，查看Request Payload或Form Data，确认数据是否正确发送。如果是Form Data格式，PHP就能用$_POST获取到；如果还是JSON，那说明参数序列化的步骤有问题。
• 表单name属性：确保你的表单输入框的name属性（比如name="name"、name="price"）和传入的参数键名一致。

这样修改后，PHP应该就能正常接收到POST数据啦！

内容的提问来源于stack exchange，提问作者Héctor Pérez Silva