AngularJS：使用 $http.post 传递复杂的 json 数据

我在使用 $http.post 在 angularjs 中传递复杂的 json 对象时遇到问题。我不断收到从服务器发回的 400 bad request 错误，表示该请求在语法上不正确。我相信它与数组有关，因为当我不包含它时它会很好地传递。

我正在传递 json。

{
    customer: {
        firstName: "John",
        lastName: "Doe",
        street: "1234 South Dr",
        city: "Detroit",
        state: "MI",
        zip: "12345",
        phone: "123-321-1234",
        email: "[email protected] /cdn-cgi/l/email-protection"
    },
    order: {
        orderDate: "06-16-2015",
        registerNum: "1",
        transactionNum: "7820",
        deliveryStatusID: 1,
        notes: "Hold order until July",
        items: [
            {skuID: "1234568",
             skuDescription: "Order item 1",
             qty: "4",
             itemStatusID: 1,
             itemStatusDescription: "Backorder"
             },
            {skuID: "7387491",
             skuDescription: "Order item 2",
             qty: "1",
             itemStatusID: 1,
             itemStatusDescription: "Flagged"
            }
        ]
    }
}

角度服务函数

this.addOrder = function(new_order) {
    return $http.post(base + "/add", new_order);
};

Spring MVC 控制器方法

@RequestMapping(value="/add", method=RequestMethod.POST)
public void addOrder(@RequestBody CustomerOrder customerOrder) {

    System.out.println("----CUSTOMER-INFO----");
    System.out.println(customerOrder.getCustomer().getFirstName());
    System.out.println(customerOrder.getCustomer().getLastName());

    System.out.println("");
    System.out.println("----ORDER-INFO----");
    System.out.println(customerOrder.getOrder().getOrderID());
    System.out.println(customerOrder.getOrder().getOrderDate());       

}

该问题似乎仅在我传递 json 中的 items 数组时才会出现。我已经传递了相同的 json 对象，但没有 items 数组，并且它工作正常。 json 的格式以与每当我使用 angularjs 服务方法获取订单时返回的格式相同的格式发送，所以我真的不确定我在哪里出了问题。

如果我需要提供更多代码，请告诉我。我感谢任何帮助我的努力。

谢谢。

Jason

在努力寻找这个问题的错误之后，我终于找到了解决方案。我想我应该分享我如何调试和解决这个问题，以防其他人遇到与我类似的情况。

在尝试了以角度方式将数据发送到服务器并不断收到相同的 HTTP 400 错误的所有可能方法之后，我决定将 json 作为字符串发送，并在我的 spring mvc 控制器中接受 json 作为字符串，如下所示。

角度服务方法：

this.addOrder = function(new_order) {
    return $http.post(base + "/add", angular.toJson(new_order));
};

弹簧控制器

@RequestMapping(value="/add", method=RequestMethod.POST, consumes="application/json")
public void addOrder(@RequestBody String json) {

}

从这里我简单地获取传入的 json 并使用 Jackson ObjectMapper 将 json 字符串转换为我的 POJO，如下所示。

将 json 字符串映射到 pojo

@RequestMapping(value="/add", method=RequestMethod.POST, consumes="application/json")
public void addOrder(@RequestBody String json) {

    ObjectMapper mapper = new ObjectMapper();

    try {

        CustomerOrder order = mapper.readValue(json, CustomerOrder.class);
        System.out.println(order.getCustomer().getFirstName() + " " + order.getCustomer().getLastName());

    } catch (JsonGenerationException e) {

        e.printStackTrace();

    } catch (JsonMappingException e) {

        e.printStackTrace();

    } catch (IOException e) {

        e.printStackTrace();

    }
}

执行此操作并运行我的代码后，当我尝试将 items json 绑定到 Order 类中的 List 时，我会在 Items 类中的字段上收到 UnrecognizedPropertyException。这只是 json 方面的一个简单的拼写错误，我完全错过了它。更正此问题后，杰克逊正确映射了所有内容，我不再收到此 HTTP 400 错误 请求语法不正确。

另一件需要注意的事情是，如果您使用 JSON.stringify 将对象作为角度字符串传递，您可能会在 JSON 对象中的 hashKey 字段上遇到相同的异常。 Angular 使用 hashKey 来监视更改。我相信您可以使用 jackson 注释来忽略未知字段，或者您可以简单地使用 angular.toJson 来代替，这将为您删除所有 hasKey/values，这就是我所做的。