Question

$("form#go").submit(function(){
    var $this = $(this);
    var btn = $this.find("button");
    btn.text("Searching").attr('disabled','disabled');
    $.ajax({
        url:
        type:
        data:
        dataType:
                    success:function(result){
             //code....
                    }
    });
    btn.text("Go").removeAttr('disabled');

    return false;
});

这是我的代码结构。问题是btn.text("Go!").removeAttr('disabled');立即运行，我看不到禁用按钮和按钮文本的更改，尽管ajax部分需要500ms才能完成。

如果我将最后一部分更改为

setTimeout(function () {
     btn.text("Go").removeAttr('disabled');
 }, 1000);

然后我可以看到1秒的变化，所以我猜我的代码有效。但我不知道为什么它会在ajax电话之前运行。

Answer 1

您需要将该代码作为回调添加到ajax调用的完整或完成函数中

Read more about it here

以下是我发布的链接

的示例

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

Answer 2

您需要指定成功功能！

像这样：

$("form#go").submit(function(){
    var $this = $(this);
    var btn = $this.find("button");
    btn.text("Searching").attr('disabled','disabled');
    $.ajax({
        //codes......
        success:function(){
            btn.text("Go").removeAttr('disabled');
        }
    });


    return false;
});

Answer 3

在ajax成功回调中调用它，因为ajax调用是异步的，所以你的代码将在ajax调用完成之前执行：

$.ajax({

............
...........
success: function()
{
setTimeout(function () {
     btn.text("Go").removeAttr('disabled');
 }, 1000);
}

});

Answer 4

默认情况下，jQuery Ajax调用是异步的。因此，要进行同步Ajax调用，可以在ajax调用中使用选项 async：false 。以下是一个简单的例子：

$.ajax({
  url: 'url',
  data: {},
  type: 'POST',
  async: false,
  //and any other options you want to use
}).success(function(data) {
  //success code
}).error(function(data) {
  //error handling
});

您可以参阅此页面了解更多详情 - http://api.jquery.com/jQuery.ajax/

ajax在ajax完成之前运行之后的jQuery代码

4 个答案: