1

私はjqueryとajaxに比較的慣れていないので、その可能性に驚いています。

私は最初のajax、jquery（検証プラグイン付き）Webフォームに取り組んでいます。ほぼ完了ですが、少しわかりません。読み込みアイコンを表示し、beforeSendメソッドで送信ボタンを無効にしたい。しかし、それは機能せず、chromeはエラーメッセージを表示しません。

これがコードです

$(document).ready(function(){
$("#Formular").validate({
    rules: {
        name: "required",
        email: {
            required: true,
            email: true
        },
        yname: "required",
        yemail: {
            required: true,
            email: true
        }  
    },
    submitHandler: function(form) {
        theUrl = 'send.php';
        var params = $(form).serialize();
        $.ajax ({
            type: "POST",
            url: theUrl,
            data: params,
            beforeSend : function(){
                $('.loading_icon').show();
            },              
            processData: false,
            async: false,
            success: function(response) {
                $('#response').hide();
                $('#response').html(response);
                $('#response').fadeIn('slow');
                $('.loading_icon').hide();  
            }
        });
    }
});

}）;

読み込み中のアイコンが表示されません。submitHandlerの前で機能したので、cssは正しく、画像も正しいです。

ここでは何もしない部分：

                beforeSend : function(){
                $('.loading_icon').show();
            },

こことドキュメントも検索しましたが、解決策が見つかりませんでした。助けてくれてありがとう！

4

2 に答える 2

2

JQueryのドキュメントには次のように書かれています。

送信前にjqXHR（jQuery 1.4.xではXMLHTTPRequest）オブジェクトを変更するために使用できる事前要求コールバック関数。これを使用して、カスタムヘッダーなどを設定します。jqXHRおよび設定マップは引数として渡されます。これはAjaxイベントです。beforeSend関数でfalseを返すと、リクエストがキャンセルされます。jQuery 1.5以降、リクエストのタイプに関係なく、beforeSendオプションが呼び出されます

これは、読み込みアイコンのようなものには使用すべきではないと私に思わせます。どうしてあなたはただ：

var params = $(form).serialize();
$('.loading_icon').show();       
 $.ajax ({
            type: "POST",
            url: theUrl,
            data: params,             
            processData: false  
        }).done(function(response) {
            $('#response').hide();
            $('#response').html(response);
            $('#response').fadeIn('slow');
        }).always(function() {
          $('.loading_icon').hide();
        });

編集

Firebugを使用してコードをデバッグしましたが、正常に動作します。それはあなたの投稿がとても速いのであなたがそれを見ることは決してないということです。

更新を編集 して、成功のためにjqXHRオブジェクトを使用するなど。これは絶対async:falseに使用しないでください...

于 2012-08-22T08:49:27.763 に答える
2

ホイールが見えないほど速くロードされるというのは真実ではありません。実際、cssの変更とsync ajaxリクエストを連続して追加すると、Chromeなどの一部のブラウザでリクエストが完了するまで変更が遅れます。あなたのajax呼び出しを見てください：

async: false,

デバッグ中の同期ajax呼び出し中の問題は、デバッガー自体が停止する前に各メソッドの完全な実行を許可し、最終的に表示される内容を変更することです。したがって、次のようなコードの任意の行にブレークポイントを設定します。

$('.loading_icon').show();       
$.ajax ({something});

読み込み中のアイコンが表示されます。細心の注意を払ってください。ブレークポイントを設定しない場合、結果（成功、エラー）が発生するまで読み込みアイコンは表示されないためです。

この種の状況で適切に機能することがわかった唯一の方法は、ajaxの同期呼び出しを非同期呼び出しに変換することです。プロセス中にユーザーが不適切なものに触れることを許可するのではないかと心配している場合は、ページ全体にdivを追加し、それを介したクリックイベントを無効にしてください。このようにすると、読み込み中のアイコンが、最後だけでなく、ajaxリクエスト全体で表示されることがわかります。

于 2014-05-29T12:01:55.860 に答える