jQuery$.ajax完成回调而未启动

jQuery $.ajax done callback not firing

本文关键字：启动 回调 ajax jQuery      更新时间：2023-09-26

我有以下代码：

$("#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似乎触发了失败处理程序。

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

您需要删除：

dataType: "json"

有很多建议可以删除

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

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

不管是什么原因，一个很好的地方就是传递给回调的"data"参数：

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

它的内容会让你了解问题所在。

需要从dataType中删除："json"，

 dataType: "json"

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));
   }

一些应该解决问题的事情和一些一般提示。

  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);
  });
});
相关文章：