0

クリックイベントを使用して 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です。

このようにすることはできますか、それとも別の方法でアプローチする必要がありますか?

4

2 に答える 2

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/

于 2012-08-01T17:57:32.503 に答える
0

Use .ajaxStart and .ajaxStop event handlers

$('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');
     });
});​
于 2012-08-01T17:48:45.803 に答える