1

私は Yii2 の高度なテンプレートを使用しており、ログイン フォームをサーバーに送信する際に「お待ちください...」というメッセージを含むダイアログを表示する方法を探しています。

これが私のアクティブなフォームコードです:

            <?php $form = ActiveForm::begin([
                'id' => $model->formName(),
                'enableAjaxValidation' => true,
            ]); ?>
                <fieldset>

                    <?= $form->field($model, 'username', [
                        'inputOptions' => [
                            'placeholder' => $model->getAttributeLabel('username'),
                        ],
                    ])->label(false); ?>

                    <?= $form->field($model, 'password', [
                        'inputOptions' => [
                            'placeholder' => $model->getAttributeLabel('password'),
                        ],
                    ])->label(false)->passwordInput() ?>

                    <?= $form->field($model, 'rememberMe')->checkbox() ?>

                    <?= Html::submitButton('Login', ['class' => 'btn btn-lg btn-success btn-block', 'name' => 'login-button']) ?>
                </fieldset>
            <?php ActiveForm::end(); ?>

そして私のサーバー側のアクション:

public function actionLogin()
{
    if (!\Yii::$app->user->isGuest) {
        return $this->goHome();
    }

    $model = new LoginForm();
    if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
        Yii::$app->response->format = Response::FORMAT_JSON;
        return ActiveForm::validate($model);
    }
    if ($model->load(Yii::$app->request->post()) && $model->login()) {
        return $this->goBack();
    } else {
        return $this->render('login', [
            'model' => $model,
        ]);
    }
}

入力の検証/フォームの送信に成功していますが、ダイアログを表示する必要があるため、接続が遅い場合、ユーザーはフォームが実際に送信されており、完了するまでに時間がかかることがわかります。

4

2 に答える 2

6

ActiveFormイベントに応じて使用する必要があるためです。現在、Javascript で管理されています (公式のアップグレード情報を参照してください)。

$('#myform').on('ajaxBeforeSend', function (event, jqXHR, settings) {
    // Activate waiting label
}).on('ajaxComplete', function (event, jqXHR, textStatus) {
    // Deactivate waiting label
});

この 2 つのイベントの詳細については、こちらをご覧ください。

ajaxBeforeSend:

ajaxBeforeSend イベントは、AJAX ベースの検証のために AJAX 要求を送信する前にトリガーされます。

イベント ハンドラーのシグネチャは次のとおりです。

関数 (イベント、jqXHR、設定)

どこ

  • イベント: イベント オブジェクト。

  • jqXHR: jqXHR オブジェクト

  • settings: AJAX リクエストの設定

ajaxComplete:

ajaxComplete イベントは、AJAX ベースの検証の AJAX 要求が完了した後にトリガーされます。イベント ハンドラーのシグネチャは次のとおりです。

関数 (イベント、jqXHR、textStatus)

どこ

  • イベント: イベント オブジェクト。

  • jqXHR: jqXHR オブジェクト

  • textStatus: リクエストのステータス (「success」、「notmodified」、「error」、「timeout」、「abort」、または「parsererror」)。

この拡張機能も確認してください。この目的に役立つかもしれません。

于 2015-03-17T11:08:31.620 に答える
0

次の JavaScript ソリューションを使用して、「送信前」をリッスンしてください。

$('body').on('beforeSubmit', 'form#yourFormId', function() {
    $('#loading').show(); //show the loading div
    var form = $(this);

  $.ajax({
    url: form.attr('action'),
    type: 'post',
    data: form.serialize(),
    success: function(data) {
        // do processing of data
         $('#loading').hide(); //hide it
    }
  });

return false;

});

id の読み込みで div を追加し、そのために適切な css を使用する必要があります

<div id='loading'> Loading ... </div>

この div に手動の閉じるボタンを追加することも、ネットワークの変動がある場合に推奨されます

于 2015-03-17T11:04:58.847 に答える