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

Question

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

json 我通过了。

{
    customer: {
        firstName: "John",
        lastName: "Doe",
        street: "1234 South Dr",
        city: "Detroit",
        state: "MI",
        zip: "12345",
        phone: "123-321-1234",
        email: "EMAIL@GMAIL.COM"
    },
    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 数组时，才会出现问题。我已经传递了没有 items 数组的相同 json 对象，它工作正常。 json 的格式以与我使用 angularjs 服务方法获取订单时返回的格式相同的格式发送，所以我真的不确定我在哪里出错了。

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

谢谢。

杰森

Answer 1

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

在尝试了所有可能的方式将我的数据以角度发送到服务器并不断收到相同的 HTTP 400 错误之后，我决定像这样在我的 spring mvc 控制器中将 json 作为字符串发送并接受 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();

    }
}

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

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

Answer 2

只是以更好的方式格式化 Json。如果有帮助，试试这个。另外，如果可能的话，发布 java 类：

{
    "customer": {
        "firstName": "John",
        "lastName": "Doe",
        "street": "1234 South Dr",
        "city": "Detroit",
        "state": "MI",
        "zip": "12345",
        "phone": "123-321-1234",
        "email": "EMAIL@GMAIL.COM"
    },
    "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"
            }
        ]
    }
}