【问题标题】:jquery ajax done function not firingjquery ajax完成功能未触发
【发布时间】:2013-05-20 14:12:24
【问题描述】:

我有一个非常简单的 jQuery Ajax 调用(如下)。 Ajax 调用执行,我可以在 Firebug Net 面板中看到服务器返回 200 OK 并返回字符串“OK”。但是,done 和 fail 函数不会触发!非常令人沮丧!

(“之前”和“之后”警报会触发。)

为简单起见(并且作为一种调试技术),我已将其剥离为最简单的骨架,但处理程序仍然不会触发。我在这里没有看到什么?

postUrl= "/mod/users/check_email/";
dataToPost= { email: "test@not.me" };

alert("before");
$.ajax
({
    type: "POST", 
    url: postUrl,
    data: dataToPost,
    done: function() 
    {
        alert("Success.");
    },
    fail: function() 
    {
        alert("Sorry. Server unavailable. ");
    },
});  // end Ajax call 

alert("after");

【问题讨论】:

标签: jquery


【解决方案1】:

您需要链接done()fail() 函数,它们不是$.ajax 中使用的选项对象的一部分:

$.ajax({
    type: "POST", 
    url : postUrl,
    data: dataToPost
}).done(function()  {
    alert("Success.");
}).fail(function()  {
    alert("Sorry. Server unavailable. ");
}); 

此外,由于 ajax 是异步的,如果“之后”警报出现在“成功”警报之前,请不要感到惊讶。

【讨论】:

  • 非常感谢!!这就像一个冠军。我正在从旧的成功和错误示例切换到完成和失败。
  • @misterrobinson - 是的,这可能有点令人困惑,但新方法不是对象的一部分,因为它们更加通用,可以用于任何延迟/承诺,比如什么$.ajax 函数返回。
  • 还有 always .always(function() {//code here}) 可以用来停止进度微调器等项目。它是 complete 的替代品。对于微调器的实际启动,您需要回到 Ajax-setup 内部并在此处添加 beforeSend: function() {//code: start spinner}
【解决方案2】:

successerror 回调可以这样使用。对于donefail,您需要这样做:

$.ajax({
    type: "POST", 
    url: postUrl,
    data: dataToPost,
}).done(function() {
    alert("Success.");
}).fail(function() {
    alert("Sorry. Server unavailable. ");
});

或者:

$.ajax({
    type: "POST", 
    url: postUrl,
    data: dataToPost,
    success: function() {
            //code here
    }
});

【讨论】:

    【解决方案3】:

    您还需要设置dataType: 'json'。当我将其设置为 'string' 时遇到了这个问题,它不会触发 done 方法。

    【讨论】:

      【解决方案4】:

      我也有这样的设置:

      $.ajax({
          type: "POST", 
          url : postUrl,
          data: dataToPost
      }).done(function()  {
          alert("Success.");
      })
      

      并遇到了同样的问题:done 函数不会触发。虽然我之前已经设法使用相同的设置使其工作了很多次,但我花了一段时间才弄清楚发生了什么。经过调整,我发现它还取决于 Ajax 调用返回的数据类型。最初,我将 ajax 调用配置为返回一些 HTML。 done 功能不起作用。在我将它改回 json (在 Flask 中使用 jsonify)后,它又可以工作了。

      【讨论】:

        【解决方案5】:

        异步 如果应同步发送请求,则设置为 false。默认为真。请注意,如果您将此选项设置为 false,您的请求将阻止其他代码的执行,直到收到响应为止。

        数据类型 您期望从服务器返回的数据类型。默认情况下,如果未指定 dataType,jQuery 将查看响应的 MIME 类型。

        删除 dataType: 'json' 如果存在。

        添加 async:false 如果不存在。

        像这样执行:

        var username=$("#username").val();
        var password=$("#password").val();
        $.ajax({
            url: "addperson.php",
            type: "POST", 
            async: false,
            data: {
                username: username,
                password: password
            }
        })
        .done (function(data, textStatus, jqXHR) { 
           var obj = JSON.parse(data);
           //Handle the response data here
            alert(obj.success); 
        })
        .fail (function(jqXHR, textStatus, errorThrown) { 
            alert("Error"); 
        })
        .always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
            alert("complete"); 
        });
        

        JSON 格式的 addperson.php 回显如下:

        $username1 = isset($_POST["username"]) ? $_POST["username"] : '';
            
        $password1 = isset($_POST["password"]) ? $_POST["password"] : '';
        
        $servername = "xxxxx";
        $username = "xxxxx";
        $password = "xxxxx";
        $dbname = "xxxxx";
        
        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
          die("Connection failed: " . $conn->connect_error);
        }
        
        $sql = "INSERT INTO user (username, password)
        VALUES ('$username1', '$password1' )";
        
            ;  
            
            
           
        
        if ($conn->query($sql) === TRUE) {
            
           echo json_encode(array('success' => 1));
        } else{
            
            
          echo json_encode(array('success' => 0));
        }
        
        
        
        
        
        $conn->close();
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2014-02-26
          • 1970-01-01
          • 1970-01-01
          • 2012-05-04
          • 2011-02-22
          • 1970-01-01
          • 2018-08-05
          • 1970-01-01
          相关资源
          最近更新 更多