我应该在 jQuery 的 ajax 成功处理程序中验证响应数据吗？

Question

假设我有一个 post AJAX 调用，我想将返回的数据放入一些 HTML 元素中。

$.post(settings.url, function(data) {
    $('#someElement').text(data.someData1);
    $('#someElement2').text(data.someData2);
});

我是一名后端开发人员，我很自然地必须对来自用户的任何数据进行服务器端验证。虽然情况正好相反，但上面的代码对我来说感觉有点不对劲（未验证外部数据）。但另一方面，我知道我从服务器返回了什么。

问题是很好相信从（也是我的）后端应用程序返回的data 将具有预期的结构，还是我应该以某种方式验证每个来自服务器的数据？ p>

另外的问题是是否有一些很好的方法来进行这种验证？手动验证每条数据的存在似乎是一件令人头疼的事情。特别是对于更复杂的数据结构。

就在写这个问题的过程中，我想到了一个想法。我可以使用$.extend()，就像它通常用于在编写模块/插件时设置默认选项一样。比如：

$.post(settings.url, function(data) {
    var trustedStructure = $.extend({
        someData1:  $('#someElement').text(),
        someData2:  $('#someElement2').text(),
    }, data);

    $('#someElement').text(trustedStructure .someData1);
    $('#someElement2').text(trustedStructure .someData2);
});

这样我就可以将当前数据作为默认数据或任何其他数据作为可信数据。

编辑： 忘记注意了。我说的是纯 JSON 数据响应。不包括 HTML 等。

Answer 1

一般你不会验证响应数据，正如你之前所说，数据是从你自己的后端返回的。您真正需要做的是确保您有适当的方法来处理来自服务器的信息的异常或错误。

如果您从服务器返回异常，您应该在客户端有办法确定是否有错误。

即返回特定代码，如 Rest API 或具有如下 JSON 结构：

// Success
{
    "error": false,
    "data": {
       ...
    }
}
// Exception
{
    "error": true,
    "message": "Username already taken",
    "type": "warning"
}

如果你总是返回 200 OK 状态码：

$.ajax({
    ...
    success: function(response) {
        if (response.error) {
            alert(response.error.message);
        } else {
            document.querySelector('#field').value = response.data.text;
        }
    }
});

HTML 响应代码在您使用 promises 时很有用，您可以为主要流程（成功、完成）返回 200 OK，以及 4XX 或 5XX 如果发生异常情况（失败）：

$.ajax({
    url: 'example.php',
    ...
})
.done(function(response) { alert(response.data); })    
.fail(function(error) { alert(error.message); })    
.always(function() { clearFields(); }); 

Answer 2

从您的服务器返回的数据是否包含 DOM 元素？

如果不是并且是纯文本返回，您可以使用textarea 来解析传入的数据，如下所示：

var textArea = document.createElement('textarea');
textArea.innerHTML = data;
data = textArea.textContent;

试一试，让服务器发送一些<p>、<img>或<script>元素