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,设置)

哪里

• event:一个Event对象.

• jqXHR:一个jqXHR对象

• settings:AJAX请求的设置

ajaxComplete:

完成基于AJAX的验证的AJAX请求后,将触发ajaxComplete事件.事件处理程序的签名应该是:

function(event,jqXHR,textStatus)

哪里

• event:一个Event对象.

• jqXHR:一个jqXHR对象

• textStatus:请求的状态("成功","未修改","错误","超时","中止"或"parsererror").

同时检查此扩展名,也许它可用于此目的.