Yii2 ActiveForm 提交前显示 loading 状态

09-03 16:40 90 0 已编辑

想要实现在点击提交按钮前,显示 loading 提示,代码如下

$('#article-form').on('ajaxBeforeSend', function (event) {
    // ajax提交前做的事情
    $("button[name=submit-button]").attr('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');
}).on('ajaxComplete', function (event, jqXHR, textStatus) {
    // ajax完成后做的事情
});

但是这么写你会发现,这两个回调都不会执行,只会执行 beforeSubmit 回调,查看 yii.activeForm.js 源码

if (needAjaxValidation && ($.isEmptyObject(messages) || data.submitting)) {
    var $button = data.submitObject,
            extData = '&' + data.settings.ajaxParam + '=' + $form.attr('id');
    if ($button && $button.length && $button.attr('name')) {
            extData += '&' + $button.attr('name') + '=' + $button.attr('value');
    }
    $.ajax({
            url: data.settings.validationUrl,
            type: $form.attr('method'),
            data: $form.serialize() + extData,
            dataType: data.settings.ajaxDataType,
            complete: function (jqXHR, textStatus) {
                    $form.trigger(events.ajaxComplete, [jqXHR, textStatus]);
            },
            beforeSend: function (jqXHR, settings) {
                    $form.trigger(events.ajaxBeforeSend, [jqXHR, settings]);
            },
            ...

会发现需要 needAjaxValidation 为 true 才会触发 ajaxCompleteajaxBeforeSend 这两个回调。所以,在你的表单中,需要加上这个 enableAjaxValidation 参数,才能使 needAjaxValidation 为 true

<?php $form = ActiveForm::begin(['id' => 'article-form', 'enableAjaxValidation' => true]); ?>

但是加上这个参数之后,你会发现,在你的鼠标失去焦点后,表单会自动提交,因为 还有一个参数 validationUrl 我们没有提供,如果不提供这个参数,那么他的默认值是当前的 url,所以最终我们需要这样写

<?php $form = ActiveForm::begin(['id' => 'article-form', 'enableAjaxValidation' => true, 'validationUrl' => 'validate-article-form']); ?>

这两个参数什么意思呢 enableAjaxValidation 顾名思义就是 启用 ajax 验证,validationUrl 则是验证的地址。

public function actionValidateArticleForm($id = null)
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $model = $id === null ? new Article() : Article::findOne($id);
    $model->load(Yii::$app->request->post());

    return ActiveForm::validate(new Article());
}

如果嫌麻烦可以不开启 enableAjaxValidation,使用 beforeSubmit也可以实现类似的效果。

客户端验证和ajax验证 https://www.yiichina.com/doc/guide/2.0/input-validation

做自己喜欢做的事。
Up骚年
Up骚年 站长 @ 十七度 创建者 17 声望
all or nothing, now or never.
0 人点赞
0 条评论
排序方式 时间 投票
快来抢占一楼吧
请登录后发表评论