jQuery $.ajax done 回调未触发

Question

我有以下代码：

$("#loginSubmitButton").on("click",function(){
  var loginUserDetails = {
    email: $("#email").val(),
    password: $("#password").val()
  };

  //Send the AJAX request to authenticate the user
  $.ajax({
    type: "POST",
    url: "/somewebservice/v1/users/authenticate",
    data: JSON.stringify(loginUserDetails),
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
  }).done(function() {
      $("#loginResult").text("Login successful");
    })
    .fail(function() {
      $("#loginResult").text("Login failed");
    });

});

根据 jquery 文档（除非我理解错误），如果我从我的 Web 服务器收到 200 OK，我希望 done 被触发。 但是，在 chrome 控制台中，我可以看到 200 OK 响应，但 jquery 似乎触发了失败处理程序。

有谁知道我在这里可能做错了什么？

Answer 1

您需要删除：

dataType: "json"

Answer 2

有很多建议可以删除

dataType: "json"

虽然我承认这是有效的，但它可能忽略了潜在的问题。 这很可能是由解析器错误（浏览器解析 json 响应）引起的。 首先检查 .always() 或 .fail() 中的 XHR 参数。

假设它是一个解析器失败，那么为什么？ 也许返回字符串不是 JSON。 或者它可能是响应开始时的错误空格。 考虑在 fiddler 中查看它。 我的看起来像这样：

Connection: Keep-Alive
Content-Type: application/json; charset=utf-8

{"type":"scan","data":{"image":".\/output\/ou...

就我而言，这是 PHP 喷出不需要的字符（在这种情况下为 UTF 文件 BOM）的问题。 一旦我删除了这些，它就解决了问题，同时还保持

dataType: json

Answer 3

如果您的服务器为 json 响应返回空字符串（即使是 200 OK），jQuery 会将其视为失败。 从 v1.9 开始，空字符串被认为是无效的 json。

无论是什么原因，一个值得关注的地方是传递给回调的“数据”参数：

$.ajax( .. ).always(function(data) {
    console.log(JSON.stringify(data));
});

它的内容将使您了解问题所在。

Answer 4

需要删除 , from dataType: "json",

 dataType: "json"

Answer 5

ajax URL 必须是同一个域。 您不能使用 AJAX 访问跨域脚本。 这是因为同源策略。
添加“dataType:JSONP”实现跨域通信

使用下面的代码

 $.ajax({
       URL: cross domain 

        dataType: 'jsonp'  
            // must use dataType:JSONP to achieve cross domain communication, otherwise done function would not called. 
           // jquery ajax will return "statustext error" at }).always(function(data){}


 }).always(function(data){
      alert(JSON.stringify(data));
   }

Answer 6

一些应该可以解决您的问题的事情以及一些提示。

1. 不要听点击提交按钮。 您应该等待表单上的提交事件。

2. $.ajax的data选项不需要 JSON 字符串。 它需要一个序列化的字符串或一个带有名称和值对象的数组。 您可以使用.serialize()或.serializeArray()轻松创建其中任何一个。

这是我对你的脚本的想法。

$('#form-with-loginSubmitButton').on('submit', function(e){


  e.preventDefault():

  var $form = $(this),
      data = $form.serializeArray();

  $.ajax({
    type: "POST",
    url: "/somewebservice/v1/users/authenticate",
    data: data
  }).done(function(result){
    console.log(result);
  });

});