【问题标题】:How to post complex json object in angularjs and spring mvc如何在angularjs和spring mvc中发布复杂的json对象
【发布时间】:2025-12-10 19:50:01
【问题描述】:

我想在 angular 和 spring mvc 中发布复杂的 json 对象。所以写这段代码。 对于简单的对象,例如客户数据,它可以正常工作。但对于复杂对象不起作用并显示错误“400 bad request”。 篮子对象可能不止一个。
我在 java 中的对象

public class Data {
   private List<BasketData> baskets;
 }
  public class BasketData {
    private CustomerData customer;
 }

 public class CustomerData {
  private String name;
  private String phone;
  private String mobile;
  private String address;
}

和弹簧控制器

 public @ResponseBody List<Data> save(@RequestBody List<Data> data){
 }

在 html 页面中,我通过 ng-reeat 创建表单。

      <div ng-repeat="item in items track by $index">
         <input ng-model="item[$index].baskets[$index].customer.phone"/>
         <input ng-model="item[$index].baskets[$index].customer.name"/>
         <input ng-model="item[$index].baskets[$index].customer.mobile"/>
         <input ng-model="item[$index].baskets[$index].customer.address"/>
      </div>

并在 angularjs 控制器中创建这个 json 对象

  var item = [
    {
        baskets: [
            {
                customer:
                    {
                        phone: "",
                        name: "",
                        mobile: "",
                        address: ""
                    }
            }
        ]
    }
];
 $scope.items.push(item);
 $http.post('/post', $scope.items);

【问题讨论】:

  • 在您的 JSON 中,您有一个购物篮中的客户列表。在您的 Java 类中,它是您的 BasketData 类中的一个简单 Customer
  • @Apédémak 我有最喜欢的清单,一个有一个客户。
  • 我知道了。我只想说,在您的带有[ ] 的 JSON 中,您有一个客户列表而不是单个对象。您可以在一个购物篮中拥有多个客户。不知道是不是你的问题的原因,但是有可能是和服务器的匹配不对。

标签: java json angularjs spring spring-mvc


【解决方案1】:

当我有复杂的 json 时,我也面临同样的问题

@RequestMapping(method = RequestMethod.POST, value = "/submitReturn", consumes = MediaType.APPLICATION_JSON_VALUE)

在您调用该方法的客户端

headers.add("Accept", MediaType.APPLICATION_JSON_VALUE);
headers.add("Content-Type", MediaType.APPLICATION_JSON_VALUE);

$.ajax({
    url: 'your url',
    type:"post",
    data : json,
    dataType: 'json',
    contentType: "application/json",
    success: function(response, textStatus, jqXHR){}
});

【讨论】: