Yii2有效表格，請在使用ajax提交時等待消息

Question

我正在使用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,
        ]);
    }
}

我已經成功地驗證了輸入/發送了表單，但是需要顯示一個對話框，因此，如果連接速度很慢，用戶會發現表單實際上正在發送，並且需要更多時間來完成。

Answer 1

對於ActiveForm您需要使用相應的事件。 目前，它使用Javascript進行管理（請參閱官方升級信息 ）。

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

這是有關這兩個事件的詳細信息。

ajaxBeforeSend：

在發送AJAX請求以進行基於AJAX的驗證之前，會觸發ajaxBeforeSend事件。

事件處理程序的簽名應為：

功能（事件，jqXHR，設置）

哪里

• 事件：一個事件對象。

• jqXHR：jqXHR對象

• settings：AJAX請求的設置

ajaxComplete：

完成AJAX請求以進行基於AJAX的驗證后，會觸發ajaxComplete事件。 事件處理程序的簽名應為：

函數（事件，jqXHR，textStatus）

哪里

• 事件：一個事件對象。

• jqXHR：jqXHR對象

• textStatus：請求的狀態（“成功”，“未修改”，“錯誤”，“超時”，“中止”或“ parsererror”）。

同時檢查此擴展名 ，也許對此有用。

Answer 2

請使用以下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中添加一個關閉按鈕