Yii2 活动表单，提交时请等待消息 ajax

Question

我正在使用 Yii2 的高级模板，并正在寻找一种在向服务器发送登录表单时显示带有 'Please wait...' 消息的对话框的方法。

这是我的活动表单代码：

            <?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

请使用以下javascript解法收听'before submit'

$('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添加一个手动关闭按钮

Answer 2

对于ActiveForm，您需要使用相应的事件。目前它由 Javascript 管理（参见 official upgrade info）。

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

这里是关于这两个事件的更多详细信息。

ajaxBeforeSend:

ajaxBeforeSend event is triggered before sending an AJAX request for AJAX-based validation.

The signature of the event handler should be:

function (event, jqXHR, settings)

where

event: an Event object.

jqXHR: a jqXHR object

settings: the settings for the AJAX request

ajax完成：

ajaxComplete event is triggered after completing an AJAX request for AJAX-based validation. The signature of the event handler should be:

function (event, jqXHR, textStatus)

where

event: an Event object.

jqXHR: a jqXHR object

textStatus: the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror").

同时检查 this extension，也许它对这个目的有用。

Yii2 活动表单，提交时请等待消息 ajax

Yii2 active form, please wait message while submitting with ajax

php

ajax

dialog

yii2

active-form