Question

所以我有这个按钮使用click事件进行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然后使用success函数将其设置回

$('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');
     });
});

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

2 个答案: