JavaScript - 如何显示来自基于 Spring MVC 的后端系统的错误消息

Question

我有一个带有 HTML / jQuery 的 Web 应用程序，它通过 AJAX / JSON 连接到带有 Java EE / Spring MVC 的后端系统。

在前端，可以通过填写表单字段来创建一个Person，然后提交并执行此jQuery代码：

var person = $(this).serializeObject();
$.postJSON("add/", person, function(data) {
    alert("Person with ID "+data.person.id+"' added successfully");
});

在最好的情况下，创建了 Person 并且我将获得一个 Person 对象，我可以使用 data.person.* 访问这些值。

现在我想验证发送到后端系统的数据，如果出现错误，我想在第一步显示一条警告错误消息。

我在后端系统中这样做了：

@RequestMapping(value="add/", method=RequestMethod.POST)
public @ResponseBody Map<String, ? extends Object> addPerson(@RequestBody Person p, HttpServletResponse response) {
    Set<ConstraintViolation<Person>> failures = validator.validate(p);
    if (!failures.isEmpty()) {
        response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
        return validationMessages(failures);
    } else {
        Person person = this.personService.addPerson(p);
        return Collections.singletonMap("person", new SerialPerson(person.getId(), person.getName(), ...));
    }
}

// internal helpers
private Map<String, String> validationMessages(Set<ConstraintViolation<Person>> failures) {
    Map<String, String> failureMessages = new HashMap<String, String>();
    for (ConstraintViolation<Person> failure : failures) {
        failureMessages.put(failure.getPropertyPath().toString(), failure.getMessage());
        System.out.println(failure.getPropertyPath().toString()+" - "+failure.getMessage());
    }
    return failureMessages;
}

我的 Person 对象被注释，我在控制台上得到 System.out.println(failure.getPropertyPath().toString()+" - "+failure.getMessage());，例如，“名称 - 必须在 1-30 个字符之间”

但是如何在前端系统的jQuery中创建一个警报消息呢？

提前感谢您的帮助和最诚挚的问候。

更新：链接到 Spring MVC AJAX 示例，我在其中找到了 validationMessages 方法。但是也没有解决方法如何获取错误消息。

解决方案：

我必须打电话：

jQuery.ajax({
    'type': 'POST',
    'url': "add/",
    'contentType': 'application/json',
    'data': JSON.stringify(person),
    'dataType': 'json',
    'success': function(data) {alert("success");}, 
    'error': function(xhr) {alert(xhr.responseText);}
});

Answer 1

你可以这样做：

var person = $(this).serializeObject();
$.postJSON("add/", person, function(data) {

    if(data.person) {
       alert("Person with ID "+data.person.id+"' added successfully");
    }

    else {
       var errors = "";
       for(var key in data) if(data.hasOwnProperty(key)) {
           errors += data[key] + "\n";
       }

       alert(errors);
    }
});

您也不需要发回错误的请求。这是你想要的吗？

更新

您可以使用 Spring Source 中显示的代码，但您必须使用 jQuery.ajax

jQuery.ajax({
   type: 'POST',
   url: "add/",
   data: person,
   dataType: "json",
   success: function(data) {
      alert("Person with ID "+data.person.id+"' added successfully");
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
      var errorJSON = JSON.parse(XMLHttpRequest.responseText); //if this is JSON otherwise just alerting XMLHttpRequest.responseText will do

      var errors = "";
      for(var key in errorJSON) if(errorJSON.hasOwnProperty(key)) {
          errors += errorJSON[key] + "\n";
      }

      alert(errors);
   }
});