簡體   English   中英

AngularJS:使用$ http.post傳遞復雜的json數據

[英]AngularJS: passing complex json data using $http.post

我在使用$ 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數組時,才出現問題。 我已經傳遞了沒有項目數組的同一個json對象,並且工作正常。 json的格式以與我每次使用angularjs服務方法獲取訂單時都會返回的格式相同的格式發送,因此我真的不確定我在哪里出錯。

如果我需要提供更多代碼,請告訴我。 感謝您為我提供的幫助。

謝謝。

傑森

在努力找到這個問題的錯誤之后,我終於找到了解決方案。 我以為我會分享如何調試和解決此問題,以防別人遇到與我相似的情況。

在嘗試了將數據以一定角度發送到服務器並不斷出現相同的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();

    }
}

完成此步驟並運行我的代碼后,當嘗試將Items json綁定到我的Order類中的List時,我的Items類中的字段上將收到UnrecognizedPropertyException。 在json方面,這只是一個簡單的拼寫錯誤,我完全錯過了它。 更正此錯誤后,傑克遜正確地映射了所有內容,並且我再也未收到此HTTP 400錯誤該請求在語法上不正確。

要注意的另一件事是,如果使用JSON.stringify將對象作為有角度的字符串傳遞,則在JSON對象的hashKey字段上可能會遇到相同的異常。 hashKey由angular使用,用於監視更改。 我相信您可以使用jackson批注來忽略未知字段,或者可以簡單地使用angular.toJson代替,這將為您刪除所有hasKey / values,這正是我所做的。

只是以更好的方式格式化了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"
            }
        ]
    }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM