3

jquery とサーブレットを使用する単純なフォームがあります。jquery はサーブレットに対して ajax 呼び出しを行い、サーブレットはサーバー側でいくつかの計算を行い、jQuery を介して同じページに結果を表示します。同じページにとどまり、結果を動的に表示したいので、フォームがデフォルトの送信を行う（そしてサーブレットに移動する）ことは望ましくありません。それはまさに私が望むように動作します:

HTML:

<form name="form1" action="FormHandler1" method="POST" class="stats-form">
    <input class="stats-input" id="number0" type="text" name="number0">
    <input id="number1" type="text" name="number1">
    <input id="number2" type="text" name="number2">
    <input id="number3" type="text" name="number3">
    <input type="submit" value="Calculate" class="calculate-stats" name="stats-submit">
</form>

jQuery:

form.submit (function(event) {
    $.ajax({
        type: form.attr("method"), // use method specified in form attributes
        url: form.attr("action"), // use action specified in form attributes (servlet)
        data: form.serialize(), // encodes set of form elements as string for submission
        success: function(data) {
            // get response form servlet and display on page via jquery 
        }
    });
    event.preventDefault(); // stop form from redirecting to java servlet page
});

ここで、サーブレットは 10 進数で計算を行うことを想定しているため、フォームの検証を追加したいと考えました。ユーザーは数字のみを入力でき、他の文字は入力できません。これを行うために、人気のあるjQuery Validationプラグインを採用しました。

検証は期待どおりに機能しますが、サーブレットへの ajax 呼び出しを行うには、上記の jQuery submit メソッドの代わりに、jQuery Validation が提供する submitHandler を使用する必要があります。検証 submitHandler を使用すると、送信時にフォームのデフォルト アクションが実行され、同じページにとどまる代わりにサーブレット ページに移動して、jQuery で動的に結果を表示します。以前のようなイベントではなく、formHandler にフォームを渡す必要がありました。これにより、デフォルトのアクションを防ぐことができました。唯一の選択肢は false を返すことですが、うまくいきません。私は過去 2 日間、これを理解しようとしてきましたが、Google-fu をほとんど使い果たしました。これが私に悲しみを与える新しいコードです：

form.validate({
       rules: {
            number0: ruleSet,
            number1: ruleSet,
            number2: ruleSet,
            number3: ruleSet,
        },
        submitHandler: function (form) {

            $.ajax({
                type: "POST",
                url: form.attr("action"),
                data: form.serialize(),
                success: function () {
                    // get response from servlet and display on page via jQuery 
                }
            });
            return false; // required to block normal submit ajax used
        }
 });

このきちんとした jQuery フォーム検証を使用したいのですが、独自の jQuery 検証をゼロから作成して、既に動作しているフォーム送信メソッドを使用できるようにすることもできます。

4

5 に答える 5

5

eventの2番目のパラメーターとして持つことができ、そこでそれsubmitHandlerを行うことpreventDefaultができます。

submitHandler: function (form, event) {
    event.preventDefault();
    // your remaining code goes below this.
}
于 2015-02-18T08:05:22.410 に答える
2

この問題を解決するために、フォーム送信ハンドラーを個別に検証します。フォーム送信内に妥当性のチェックを入れるだけで、true の場合にのみ ajax 呼び出しを実行します。これにより、ajax 呼び出しが行われたかどうかに関係なく、送信イベントのアクションを処理 (preventDefault()) できます。

form.validate({
    rules: {
        number0: ruleSet,
        number1: ruleSet,
        number2: ruleSet,
        number3: ruleSet,
    }
});

form.submit (function(event) {
    if (form.valid())
    {
        $.ajax({
            type: form.attr("method"), // use method specified in form attributes
            url: form.attr("action"), // use action specified in form attributes
            data: form.serialize(), // encodes set of form elements as string for submission
            success: function(data) {
                // get response from servlet and display on page via jQuery 
            }
        });
    }
    event.preventDefault(); // stop form from redirecting to java servlet page
});
于 2013-10-16T13:20:49.100 に答える