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
});

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

ajaxBeforeSend：

在发送基于 AJAX 的验证的 AJAX 请求之前触发 ajaxBeforeSend 事件。

事件处理程序的签名应该是：

函数（事件、jqXHR、设置）

在哪里

  • 事件：一个事件对象。

  • jqXHR：一个 jqXHR 对象

  • settings：AJAX 请求的设置

ajax完成：

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 回答