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

Question

I'm having trouble passing a complex json object in angularjs with $http.post. I'm keep getting a 400 bad request error sent back from the server saying the request was syntactically incorrect. I believe it has something to do with the array since it passes fine when i don't include it.

json i'm passing.

{
    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"
            }
        ]
    }
}

angular service function

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

Spring MVC controller method

@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());       

}

The problem only seems to occur when I pass the items array in the json. I've passed the same json object without the items array and it works fine. The format of the json is being sent in the same format that gets returned whenever I GET an order with my angularjs service method so I'm really not sure as to where I'm going wrong with this.

If I need to provide more code please let me know. I appreciate any effort in helping me out.

Thank you.

Jason

Answer 1

Well after struggling to find my error in this problem, I finally found a solution. I thought I'd share how I debugged and fix this problem in case someone else is in a similar situation as I was.

After trying every possible way of sending my data in angular to the server and continually getting the same HTTP 400 error, I decided to send the json as a string and accept the json as a string in my spring mvc controller like this.

angular service method:

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

spring controller

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

}

From here I simply took the json passed in and used the Jackson ObjectMapper to convert the json string to my POJO like this.

mapping json string to 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();

    }
}

After doing this and running my code, I would get an UnrecognizedPropertyException on a field in my Items class when trying to bind the items json to the List in my Order class. It was just a simple mispelling on the json side and I completely missed it. After correcting this, jackson mapped everything correctly and I no longer get this HTTP 400 Error The request was syntactically incorrect.

Another thing to note is that if you pass your object as a string in angular using the JSON.stringify you may encounter this same exception on hashKey field in the JSON object. The hashKeys are used by angular to monitor changes. I believe you can use a jackson annotation to ignore unknown fields or you can simply use angular.toJson instead which will remove all the hasKey/values for you which is what I did.

Answer 2

Just formatted the Json in a better way. Try this if it helps. Also, post the java classes if possible:

{
    "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"
            }
        ]
    }
}