Question

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

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

我是一名后端开发人员，我必须对来自用户的任何数据进行服务器端验证，这对我来说很自然。虽然情况恰恰相反，但上面的代码对我来说有点不对（未经过验证的数据外）。但另一方面，我知道我从服务器返回的内容。

问题是它是否正确来信任从（也是我的）后端应用程序返回的data将具有预期的结构，或者我应该以某种方式验证来自服务器的每个数据？

另外一个问题是，是否有一些很好的方法来进行此类验证？手动验证每个数据的存在似乎是一个痛苦的问题。特别是对于更复杂的数据结构。

在写这个问题的过程中，我想到了一个想法。我可以使用$.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;
        }
    }
});

当您使用promises时，HTML响应代码非常有用，您可以为主流返回 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 Elements？

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

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

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

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

2 个答案: