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进行管理（请参阅official upgrade info）。

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

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

<强> ajaxBeforeSend：

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

事件处理程序的签名应为：

功能（事件，jqXHR，设置）

，其中



event：一个Event对象。



jqXHR：jqXHR对象



设置：AJAX请求的设置

<强> ajaxComplete：

在完成AJAX请求后触发ajaxComplete事件   基于AJAX的验证。事件处理程序的签名应为：

function（event，jqXHR，textStatus）

，其中



event：一个Event对象。



jqXHR：jqXHR对象



textStatus：请求的状态（“成功”，“未修改”，“错误”，“超时”，“中止”或“parsererror”）。

同时检查this extension，这可能对此有用。

Answer 2

在提交＆＃39;

之前，请使用以下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中添加一个关闭按钮

Yii2活动表格，请在用ajax提交时等待消息

2 个答案: