jquery - 按钮点击保持在活动状态并且在点击功能完成之前不会改变（解决方法？）

Question

我有这个按钮使用单击事件进行 ajax 调用。我的目标是使按钮内的文本在我进行 ajax 调用时从“提交”变为“正在加载...”。问题是，由于某种原因，我无法更改匿名函数内部的文本（甚至隐藏按钮），我坚持使用该.click()方法，直到执行完所有代码。或者至少在 ajax 调用完成之前没有明显的效果，而是停留在按钮的活动状态。

我上交async: false了$.ajax电话，这使得完成点击事件中的所有内容都需要一段时间。我认为我需要这种方式，但出于必要时我可以考虑的原因。我提出这个问题的原因是因为我正在寻找的解决方案应该在 ajax 调用之前以同步方式更改文本。

这是我正在使用的 jQuery 的简化版本：

$('a').click(function(){
    $(this).text('loading');//changing text BEFORE the ajax call
    $.ajax({
        type: 'POST',
        url: 'http://www.jsfiddle.net/',
        data: {foo: 'bar'},
        async: false
    });
    $(this).text('Send Request');
});​

这是一个jFiddle显示我的意思。

我可以这样做还是需要以不同的方式处理？

Answer 1

编辑：

我终于明白你在说什么了。在 ajax 开始之前，您可以执行以下操作来更改文本。使用 setTimeout 然后使用成功函数将其设置回来

$('a').click(function() {
    var $this = $(this);
    $this.text('loading');
    setTimeout(function(){
        $.ajax({
            type: 'POST',
            url: '/echo/json/',
            data: {
                foo: 'bar',
              delay: 3
            },
            async: false,           
            success: function(){
                 $this.text('Send Request');  
            }
        });
    },100);      
});

http://jsfiddle.net/uJzzn/11/

Answer 2

使用.ajaxStart和.ajaxStop事件处理程序

$('a').click(function(){

    $(this).ajaxStart(function(){
       $(this).html('loading');
     });
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {foo: 'bar'}
    });
    $(this).ajaxStop(function(){
       $(this).html('Send Request');
     });
});​