Angular4表单ngSubmit提交数据至PHP失败，寻求解决方案

嘿，我帮你梳理下这个POST请求的问题，之前也遇到过类似的情况，咱们一步步来排查和修复：

一、先看服务端PHP的问题 #

你的postData.php有两个潜在问题：

1. 响应格式错误：Angular的Http模块默认期望JSON格式的响应，但你直接echo json_decode($data);会输出字符串Array或Object，导致Angular解析响应时出错。
2. 缺少Content-Type响应头：需要明确告诉客户端返回的是JSON数据。

修改后的postData.php代码：

<?php
header('Access-Control-Allow-Origin: *');
// 修正X-Auth-Token的空格问题，避免不必要的头解析错误
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
// 必须添加这个头，指定响应为JSON格式
header('Content-Type: application/json');

include('connexion.php');
$data = file_get_contents("php://input");
// 第二个参数设为true，将JSON转为关联数组，方便后续操作
$decodedData = json_decode($data, true);

// 这里可以添加你的数据库插入逻辑（示例）
// if (!empty($decodedData)) {
//     $stmt = $conn->prepare("INSERT INTO your_table (column1, column2) VALUES (?, ?)");
//     $stmt->bind_param("ss", $decodedData['field1'], $decodedData['field2']);
//     $stmt->execute();
// }

// 返回结构化的JSON响应，让Angular能正确解析
echo json_encode([
    'status' => 'success',
    'received_data' => $decodedData
]);
?>

二、Angular服务端的调整 #

你的tables.service.ts存在两个小问题：

1. POST请求未解析响应：和GET请求一样，需要用map操作符将响应转为JSON。
2. 参数类型错误：form.value是一个对象，不是数组，所以参数类型应该是any而不是any[]。

修改后的tables.service.ts代码：

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
// 别忘了导入rxjs的map操作符
import 'rxjs/add/operator/map';

@Injectable()
export class TablesService {
  constructor(private http: Http) { }

  // get table content
  getTableContent() {
    return this.http.get('http://localhost/Backend/tables.php')
      .map(res => res.json());
  }

  // post data to table
  postTableContent(contents: any) {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    console.log('form data \n' + JSON.stringify(contents));
    return this.http.post('http://localhost/Backend/postData.php', JSON.stringify(contents), { headers: headers })
      .map(res => res.json()); // 添加map解析响应
  }
}

三、组件端的调试优化 #

在TableChoisieComponent的onSubmit方法里，添加更详细的错误日志，方便定位问题：

// on submit
onSubmit(form: NgForm) {
  // 先确认表单数据是否正确
  console.log('提交的表单数据:', form.value);
  
  this.tableContentsS.postTableContent(form.value)
    .subscribe(
      (response) => {
        console.log('请求成功！响应数据:', response);
      },
      (error) => {
        // 打印完整错误信息，包括状态码、错误消息
        console.error('请求失败，错误详情:', error);
        console.error('错误状态码:', error.status);
        console.error('错误消息:', error.message);
      }
    );
  this.signupForm.reset();
}

四、关键排查步骤 #

完成上述修改后，打开浏览器开发者工具（F12），切换到Network标签，重新提交表单，查看POST请求的细节：

• 检查请求URL是否正确，是否出现404/500等错误状态码
• 查看Request Headers中的Content-Type是否为application/json
• 查看Request Payload里是否有你提交的JSON数据
• 查看Response里是否返回了正确的JSON格式数据

如果还是有问题，把Network标签里的请求详情和Console里的错误信息贴出来，能更快定位问题~

内容的提问来源于stack exchange，提问作者Hazem HASAN