jQuery AJAX返回200 OK状态，但出现错误。我该如何查看错误的详情？

Question

我有以下 jQuery 代码：

var fn = {
    Load: function () {
        $(".myclass input.Submit").click(function (e) {
            var _IsValid = fn.IsValid();
            if (_IsValid == false) {
                e.preventDefault();
            }
            //Popup displays message fine if "return false;" is
            //called here but then obviously never posts back.
        });
    }
, IsValid: function () {

    var _IsValid = true;
$.ajax({
       url: "/myURL"
       , type: 'POST'
       , contentType: 'application/json; charset=utf-8'
        , data: JSON.stringify({ Barcode: $barcode.val(), Email: $email.val() })
        , dataType: 'json'
       , success: function (data) {
          var array = eval(data);
          if (array[0] == 0) {
            _IsValid = false;
            ShowPopup(array[1]);
          }
         }
       , error: function (xhr, status, error) {

         }
    });
   return _IsValid;
 }
}

AJAX响应显示为200 OK，但success函数未被执行。相反，似乎运行了error函数。

该脚本作为ASP.NET ImageButton的单击事件侦听器运行。如果_IsValid==false，则调用e.preventDefault()以防止回发。

奇怪的是，如果我在事件侦听器函数末尾添加return false，则此代码将运行success函数。

我如何找出导致错误的原因以解决它？

- Curtis

Answer 1

如何找出导致错误的原因并解决它呢？您可以在浏览器中使用诸如FireFox的FireBug等JavaScript调试工具，这将使您能够查看AJAX请求和响应。您将看到发送到服务器的确切数据以及任何可能的错误。实际上，看一下这个：

dataType: 'json;'

您可能想表达的是：

dataType: 'json'

当您明确设置响应内容类型时，应确保服务器发送有效的JSON，因为jQuery将尝试解析响应，如果失败，则会引发异常。

另外，我完全建议替换：

data: '{"Barcode":"' + $barcode.val() + '", "Email":"' + $email.val() + '"}'

使用：

data: JSON.stringify({ Barcode: $barcode.val(), Email: $email.val() })

不要像你构建JSON时那样使用字符串拼接。

- Darin Dimitrov

---

谢谢您的回复。我已经按照您的建议进行了更改，但仍然出现错误。此外，我尝试在Google Chrome中调试JavaScript时，xhr.ResponseText = ""。您还有其他建议吗？ - Curtis

我的建议是查看“Network”标签页，在那里你可以看到AJAX请求和响应。但在这种情况下，如果服务器发送了一个空的响应，并且你明确设置了dataType: 'json'，嗯，你知道的，''是无效的JSON。所以你可以尝试修复你的服务器以发送有效的JSON。 - Darin Dimitrov

@Curt，确实，这是有效的JSON。这是您在网络选项卡中看到的响应吗？您是否已经解决了代码中的“dataType：'json;'”问题？ - Darin Dimitrov

网络选项卡中的响应为空。但是当在代码后面添加了 return false 时（正如我在问题的编辑中添加的那样），这种情况就不会发生。这有什么道理吗？是的，我已经更正了 json，我已经更新了问题中的脚本以展示现在正在使用的内容。 - Curtis

如果在网络选项卡中响应为空，则意味着您的服务器端代码存在问题。可能解释您观察到的return false和e.preventDefault()之间差异的原因是您忘记定义e变量，因此当您尝试调用preventDefault时会出现js错误。该变量通常作为参数传递给单击处理程序。不幸的是，由于您没有显示您的代码，因此很难为您提供进一步的帮助。查看您的JavaScript调试工具。查看控制台。它肯定包含您问题的答案。 - Darin Dimitrov

Answer 2

我认为您目前遇到的问题是，您的IsValid函数总是返回true。这是因为在函数返回之前，AJAX请求没有足够的时间完成。毕竟，它是一个异步函数。

从我所了解的情况来看，您想使用AJAX请求验证表单，如果验证通过则提交表单，否则显示弹出窗口。如果我的理解是正确的，您应该这样做...

$(".myclass input.Submit").click(function (e) {
    e.preventDefault();
    ProcessForm();
});

function ProcessForm(){
   $.ajax({
       url: "/myURL"
       , type: 'POST'
       , contentType: 'application/json; charset=utf-8'
        , data: JSON.stringify({ Barcode: $barcode.val(), Email: $email.val() })
        , dataType: 'json'
       , success: function (data) {
          var array = eval(data);
          if (array[0] == 0) {
            ShowPopup(array[1]);
          }
          else//VALID
          {
             document.forms[0].submit();
             //OR IF YOU HAVE MULTIPLE FORMS SPECIFY AN ID...
             document.getElementById("FormElement").submit();
          }
         }
       , error: function (xhr, status, error) {

         }
    });
}

- musefan