javascript - SpringMVC : display error view on failed AJAX request

Question

我有一个网页，在用户查询时，向服务发出请求，并使用从 AJAX 接收的数据在其自身上呈现 HTML 表格(因此不是整个页面)。

有两种方法调用该服务:

1. 通过 API:my.website.com/api/person/John --> 这将返回原始 JSON
2. AJAX 请求:my.website.com/person#John --> 在内部调用 API，并用它获取的数据填充 HTML 表格

正在发生的事情是，如果发生内部错误:

1. 通过 API 调用时:显示我的自定义错误 View - 这是所需的行为
2. 当使用 AJAX 请求调用时:自定义错误 View 不会显示 - 相反，发生的只是 HTML 表格未填充 - 不良行为。我也想在这里查看错误!

javascript

function displayPersonData(template, person) {
        var url = "/api/person/" + person;

        $.getJSON(url, function (data) {
            renderHtmlTable(template, data);
        });
}

APIcontroller.java

@RequestMapping(value = "api/person/{person}", produces = "application/json", method = RequestMethod.GET)
public @ResponseBody Person execute(@PathVariable(value = "person") String person) {

        Random r = new Random();
        if(r.nextDouble() > 0.5) {
            return proxy.getPersonData(person); // returns JSON
        } else {
            throw new MyCustomException("Test");
        }       
}

错误Controller.java

@ExceptionHandler(MyCustomException.class)
@ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
public ModelAndView errorCallingService() {
    LOG.error(MessageFormat.format("Call to %s failed.", PERSON_SERVICE)); // the logs gets triggered successfuly

    return new ModelAndView("error_view.jsp"); // error_view doesnt get displayed
}

错误 Controller 成功触发抛出的异常，并生成日志。但由于某种原因，它不显示 error_view.jsp。仅当使用 AJAX 调用时。

有解决办法吗？我不想重定向到错误页面，这样的 URL 似乎不正确:my.website.com/exception_view

Answer 1

首先您应该知道ajax请求将以文本形式给您响应，而不是重定向。所以你应该自己处理 View 渲染。但目前您很可能甚至没有从服务器获得文本响应，因为:

• 如果您的错误 View 名称是“error_view.jsp”，则 spring 将尝试在“/api/person/error_view.jsp”处查找 View 。在这种情况下，将返回值更改为“/error_view.jsp”以防止创建相对路径。
• 另一点是 $.getJSON 可能会在客户端产生错误，因为如果发生错误，响应内容类型是 text/html。请改用 $.ajax。
• 最后，HttpStatus.INTERNAL_SERVER_ERROR 会导致您的请求失败，因此您需要注册另一个错误回调。

要处理返回的 html，您可以将其放入页面上预定义的占位符。所以js中的代码可以是这样的:

function displayPersonData(template, person) {
    var url = "/api/person/" + person;

    $.ajax({
      url: url,
      success: function (data) {
        renderHtmlTable(template, data);
      },
      error: function (xhr) {
        $("#placeholder").html(xhr.responseText);
      },
    );
}