1

jQuery ajaxメソッドを使用してフォームを送信するためのこのコードから始めました(問題なく動作しています)

$( function() {
//bind an event handler to the submit event for the appointment form
    $("#idw-form").on("submit", function(e) {
//cache the form element for use in this function
    var $form = $( this );
//prevent the default submission of the form
    e.preventDefault();
//run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request
    $.post($form.attr('action'), $form.serialize(), function (responseData) {
        if (responseData == 1) {
            $.mobile.changePage( 'thank-you-dialog.html', { transition: "pop" } );
        } else {
            $.mobile.changePage( 'error-dialog.html', { transition: "pop" } );
        }
        return false;
    });
});
});

次に、jQuery 検証プラグインを使用した検証を導入したいと考えました。このコードを submitHandler コールバック関数に入れるだけでいいと思ったのですが、うまくいきませんでした。作業に何時間も費やし、firebug でデバッグし、最終的に機能するようになりました。問題を引き起こしていることがいくつかありました。

  1. e.preventDefault();必要に慣れているをコメントアウトする必要がありました。(これを入力しているので、jQuery Mobile Framework で動作させるために必要だったので、このコード行だけを含めたのかもしれませんが、よくわかりません)。
  2. .serialize()'d'されていた変数を変更する必要がありました。このコードでフォームが送信されると、何らかの理由で、シリアル化関数は常に空の文字列を返します。

これが、最終的に機能するようになった修正済みのコードです。

submitHandler: function(form) {
    formObj = $( '#' + form.id );
    var replaceDiv = $( '#main-content' );
    //prevent the default submission of the form
    //e.preventDefault();
    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request
    $.ajax({
        type: 'POST',
        url: '/scripts/idw-mail-handler.php',
        dataType: 'json',
        data: formObj.serialize(),
        success: function(responseData, responseStatus, responseXml){
            console.log( 'responseData is: ' + responseData );
            console.log( 'responseStatus is: ' + responseStatus );
            console.log( 'responseXML is: ' + responseXml );
            replaceDiv.hide();
            if (responseData.sentStatus == 1) {
                replaceDiv.before(responseData.successMessage);
                $('html, body').animate({
                    scrollTop: 0
                }, 300);
                console.log( 'sentStatus equals: ' + responseData.sentStatus );
            } else {
                replaceDiv.before(responseData.errorMessage);
                $('html, body').animate({
                    scrollTop: 0
                }, 300);
                console.log( 'sentStatus equals something other than 1: ' + responseData.sentStatus );
            }
        },
        error: function(errorXml, errorStatus, errorError){
            console.log( 'ErrorXml is: ' + errorXml );
            console.log( 'errorStatus is: ' + errorStatus );
            console.log( 'errorError is: ' + errorError );
        },
        complete: function(completeXml, completeStatus){
            console.log( 'completeXML is: ' + completeXml );
            console.log( 'completeStatus is: ' + completeStatus );
        }
    });
}

もちろん、error:andcomplete:メソッド (「メソッド」は正しい用語ですか?) は必要ありません。jQueryのajax関数をよりよく理解するために使用していたものです。

そこで、質問が 3 つあります。

  1. jQuery 検証スクリプトには、default防止する必要があるアクションがありますか? 動作している私のコードに基づいていないように見えることはわかっていますが、誰かがそれについて追加の洞察を持っているかどうかを確認したかった.
  2. serialize()'d'されていた変数を変更する必要があったのはなぜですか? .on("submit", function(e) { ...$(this) を実行できるようにする jQuery の発火方法を使用する場合と、jQuery 検証関数serialize()の方法を介して ajax 送信を発火する場合の違いは何ですか?submitHandler:
  3. これを行うためのより効率的/より良い方法はありますか?

フィードバックをお寄せいただきありがとうございます。

4

1 に答える 1

1

jQuery 検証スクリプトには、防止する必要がある既定のアクションがありますか? 動作している私のコードに基づいていないように見えることは知っていますが、誰かがそれについて追加の洞察を持っているかどうかを確認したかった.

いいえ、そうではありません。これは、最終的にイベントを処理するコードをsubmit確認することで確認できます。これを証明する簡単な例を書くこともできます:

$("#myform").validate({
    submitHandler: function (form) {
        console.log('hi');
    }
});

上記の例では、フォームが有効な場合でも、実際にはフォームを投稿しません。submitを指定すると、プラグインはイベントのデフォルト アクションを防止しますsubmitHandler。

serialize() されていた変数を変更する必要があったのはなぜですか? jQuery .on("submit", function(e) { ... $(this) を serialize() できるようにする起動方法を使用する場合と、を介して ajax 送信を起動する場合の違いsubmitHandler: jQuery 検証関数のメソッド?

内部ではsubmitHandler、thisフォームに適用するバリデータ オブジェクトを参照します。そのため、イベント ハンドラー (イベントが発生した要素を参照する$(this).serialize()場所) 内で行ったように意味がありません。this代わりに、に渡されるフォーム要素を jQuery する必要がありますsubmitHandler。

$("#myform").validate({
    submitHandler: function (form) {
        var serialized = $(form).serialize();
    }
});

これを行うためのより効率的/より良い方法はありますか?

あまり。これはかなり標準的で正しい使用方法だと思いますsubmitHandler。AJAX 送信コードをもう少し短くしたい場合は、通常の jQuery AJAX 呼び出しを行う代わりに、 jQuery フォーム プラグインを調べることができます (実際、validate のドキュメントのサンプル コードの一部はそのプラグインを使用しています)。

于 2012-07-24T02:43:55.983 に答える