如何解决AngularJS无法向Spring MVC控制器提交表单数据的问题

我来帮你排查下这个表单数据无法成功发送到控制器的问题，看了你的代码后，主要有几个关键地方需要调整，下面一步步来解决：

问题分析与修复步骤 #

1. 表单数据绑定不规范 #

你当前在AngularJS里直接用$scope.name、$scope.salary来获取表单值，但其实你已经定义了$scope.formData对象，应该把表单控件和这个对象的属性绑定，这样既符合AngularJS的最佳实践，也能确保数据正确收集。

修改后的AngularJS脚本（核心调整）：

var app = angular.module('formSubmit', []);
app.controller('FormSubmitController', ['$scope', '$http', function($scope, $http) {
    $scope.list = [];
    $scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
    $scope.formData = {}; // 这个对象用来绑定表单数据

    $scope.submit = function() {
        // 直接使用绑定好的formData，不需要重新构造
        var formData = $scope.formData;

        // 调整$http.post的参数：直接传递formData，而不是包在Emp键里
        var response = $http.post('submitmock', formData, {
            headers: { 'Content-Type': 'application/json' } // 显式指定Content-Type，确保Spring能正确解析
        });

        response.success(function(data, status, headers, config) {
            $scope.list.push(data);
            // 提交后清空表单
            $scope.formData = {};
        });

        response.error(function(data, status, headers, config) {
            alert("Exception details: " + JSON.stringify({ data: formData }));
        });
    };
}]);

2. Spring MVC控制器接收参数的匹配问题 #

你当前的控制器用@RequestBody Emp Emp接收对象，但之前AngularJS传递的是{ Emp: formData }这种嵌套结构，和Emp类的结构不匹配。现在调整后直接传递formData（和Emp类属性对应），就能正确解析了。

确保你的Emp实体类有这些必要条件：

• 无参构造函数（Jackson解析JSON需要）
• 所有属性的getter和setter方法
• 属性名称和AngularJS传递的name、salary、designation完全一致（大小写敏感）

示例Emp类：

public class Emp {
    private String name;
    private Double salary;
    private String designation;

    // 无参构造函数
    public Emp() {}

    // getter和setter方法
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }

    public Double getSalary() { return salary; }
    public void setSalary(Double salary) { this.salary = salary; }

    public String getDesignation() { return designation; }
    public void setDesignation(String designation) { this.designation = designation; }
}

3. 表单HTML的绑定调整 #

你没贴出表单的HTML代码，这里补充正确的绑定方式，确保控件和$scope.formData的属性关联：

<div ng-app="formSubmit" ng-controller="FormSubmitController">
    <h2>{{headerText}}</h2>
    <form ng-submit="submit()">
        <div>
            <label>Name:</label>
            <input type="text" ng-model="formData.name" required />
        </div>
        <div>
            <label>Salary:</label>
            <input type="number" ng-model="formData.salary" required />
        </div>
        <div>
            <label>Designation:</label>
            <input type="text" ng-model="formData.designation" required />
        </div>
        <button type="submit">Submit</button>
    </form>
    <!-- 可以显示提交后的结果 -->
    <div ng-repeat="emp in list">
        <p>Name: {{emp.name}}, Salary: {{emp.salary}}, Designation: {{emp.designation}}</p>
    </div>
</div>

4. 额外注意事项 #

• 确保你的Spring项目中已经引入了Jackson依赖（比如jackson-databind），这样Spring才能自动将JSON请求体解析为Java对象。
• 检查后端接口的路径submitmock是否和AngularJS中$http.post的路径一致，注意是否有上下文路径的影响。

内容的提问来源于stack exchange，提问作者Ashish Vc