如何区分 HTML 中的 ajax 结果答案

【问题标题】：How to differentiate ajax result in HTML如何区分 HTML 中的 ajax 结果
【发布时间】：2011-11-18 23:52:08
【问题描述】：

我有一个以 HTML 格式返回结果的 ajax 调用。如果请求良好，则返回 HTML 中的联系人列表；否则它应该返回验证错误。两种情况都返回 HTML。

问题是这样的：如果对服务器的请求成功，我无法判断结果是验证错误还是联系人列表。我需要知道，以便我可以相应地操作我的 HTML：

        $.ajax({
            type: 'POST',
            [snip]
            success: function(response) {
                 // here I need to tell if there was a validation error
                 // or the request succeeded
            }

例如，一个好的请求的 HTML 可能看起来像...

<tbody>
    <tr>
        <td>@contact-name</td>
    <tr>
</tbody>

虽然错误的请求看起来像......

<ul>
    <li>Please fix some error</li>
</ul>

我将结果显示在不同的位置，因此需要区分可能的结果。

【问题讨论】：

标签： jquery ajax

【解决方案1】：

您可以在 json 中编码您的响应，并发送一个代码，告诉您请求是否成功。

【讨论】：

我可以，但我希望避免使用 JSON，因为在我的特殊情况下这样做会很痛苦。
另一种解决方案是在您的 HTML 响应中搜索某个关键字，例如“error”：response.indexOf('error') !== -1
这只是一个问题，但也许您可以使用自定义 http 标头发回您的响应，例如“ajax-request-success: 1”或类似的东西。
您也可以让第一个假设 div 在您的响应中包含错误代码并使用 jquery 解析它，或者以 xml 形式返回您的响应。

【解决方案2】：

如果您不想迁移到 JSON，并且不想使用不同的状态代码，那么根据您的标记，您可以根据第一个元素的标签名称进行区分：

success: function(response) {
    var elements = $(response);
    if (elements[0].tagName.toUpperCase() === "UL") {
        // ...bad response...
    }
    else {
        // ...good response...
    }

    // Display it either way (in our case, we just append, but you'll probably
    // put them in different places)
    elements.appendTo(document.body);
}

Live example

或者就此而言，在一开始就包含一个您总是删除的虚拟元素，其中包括结果（例如，<div class='good'></div> 与 <div class='bad'></div>）。

【讨论】：

【解决方案3】：

这是一个想法：

如果您返回一个带有成功标志的 JSON 对象和您的 HTML 内容，您就可以知道将 HTML 放在哪里。

JSON 看起来像这样：

{
  success: true,
  html: "<ul><li>Html here</li></ul>"
}

【讨论】：

【解决方案4】：

您可以让服务器返回一个自定义的 2xx 状态代码，并在状态文本中包含问题的性质。

由于验证响应是成功响应，因此您希望使用 200 系列代码，并且使用自定义状态代码可以让您将该类型的响应与所有其他潜在响应区分开来。

【讨论】：

【解决方案5】：

执行此操作的正确语义方法是使用 HTTP 标头。如果错误是未找到联系人，请发出 404 Not Found 状态代码。这将触发error 处理程序而不是success 处理程序，因此您可以区分并运行不同的代码。

【讨论】：

嗯，这是一个验证错误，所以它不完全是 404 ......这让我有点困惑。