0

次のコードを使用します。

            $('#langHref').html("Translating...").css("color","#FF9933");

            jQuery.ajax({
                type: "post"
                 , url: someUrl
                 , data: { "text": $('body').html() }
                 , async: false 
                 , success: function (data, status) {  
                     $('body').html(data);                      
                 },
                error: function () {
                    alert('We are sorry, there was an error in the translation service.');
                    //console.log("ERROR", arguments);
                }
            });

            $('#langHref').html("Select Language").css("color","");
        }

「langHref」の ID を持つ<a>タグがあります。ここでのアイデアは、ajax が呼び出される直前に、リンク テキストが「Translating...」に設定され、その色がオレンジ色に変わるということです。ajax が完了すると、リンク テキストは標準の「言語の選択」に戻ります。

これは FF ではうまく機能しますが、IE と Chrome では失敗します。私はすべてのbeforeSend jQueryオプションとajaxSendイベントを試して、ajaxが出る前にそれを設定しようとしましたが、役に立ちませんでした。

async: false をオフにすると、明らかにテキストがすぐに「言語の選択」に戻り、機能していません。また、 async: true を試して、「Translating....」呼び出しを beforeSend に入れました。これは、試したどのブラウザーでも機能しません。

考え？

4

2 に答える 2

0

beforeSend を ajax リクエストに追加して、次のようにするとよいと思います。

beforeSend: function ( xhr ) {
    $('#langHref').html("Translating...").css("color","#FF9933");
 }

そして完全な方法も:

complete : function(jqXHR, textStatus) {
            $('#langHref').html("Select Language").css("color","");
},
于 2012-04-13T23:53:32.177 に答える
0

asyncプロパティを に変更しtrue 、完了したイベント内に最後の行を配置することで実行できます 。このようなもの：

            jQuery.ajax({
                type: "post"
                 , url: someUrl
                 , data: { "text": $('body').html() }
                 , async: true
                 , success: function (data, status) {  
                     $('body').html(data);                      
                 },
                error: function () {
                    alert('We are sorry, there was an error in the translation service.');
                    //console.log("ERROR", arguments);
                },
               completed:function(){
                   $('#langHref').html("Select Language").css("color","");
                },
                beforeSend:function(){
                $('#langHref').html("Translating...").css("color","#FF9933");
                 }
            });

おそらく何が起こっているのかというと、UI を変更する前に jQuery ajax 関数が非同期だったために UI がブロックされ、変更できなくなったということです。

于 2012-04-13T23:54:07.897 に答える