jQuery $.ajax 完成回调未触发

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 文档（除非我的理解有误），如果我从我的网络服务器收到 200 OK，我预计会触发完成。但是，在 chrome 控制台中，我可以看到 200 OK 响应，但 jquery 似乎触发了失败处理程序。

有人知道我在这里做错了什么吗？

Answer 1

你需要删除：

dataType: "json"

Answer 2

有很多建议要删除

dataType: "json"

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

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

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

需要从 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);
  });

});