Question

我有一个创建购买页面。它有一个供应商下拉字段，我可以添加新供应商，在单击时显示模式。模式是添加新供应商的表单。创建新供应商并单击“提交”按钮后，页面将刷新。

以下是截图： enter image description here

由于我的操作控制器中的redirect功能，页面会刷新：

$model->refresh();
return $this->redirect(['index', 'id' => $session['user_id']]);

我知道Ajax可以解决这个问题，但我不知道如何开始。如何通过单击“创建”按钮在我的Ajax函数中使用它而不通过我的控制器（仅用于前端显示）从模态表单中获取数据？

Answer 1

通过在ActiveForm选项中添加以下行来禁用Yii客户端验证

'enableClientValidation'=>false

现在在表单提交上添加您的javascript代码以收集表单数据并将其发送到服务器。 Yii将验证此数据，如果有任何验证错误，我们会将其发回

$this->registerJs('
    $("#contact-form").submit(function() {
        $(".form-group").removeClass("has-error");      //remove error class
        $(".help-block").html("");                      //remove existing error messages

        var form_data = $("#contact-form").serialize();
        var action_url = $("#contact-form").attr("action");

        $.ajax({
            method: "POST",
            url: action_url,
            data: form_data
        })
        .done(function( data ) {
            console.log(data);
            if(data.success == true)    {       //data saved successfully 

            }   else    {       //validation errors occurred
                $.each(data.error, function(ind, vl) {      //show errors to user
                    $(".field-contactform-"+ind).addClass("has-error");
                    $(".field-contactform-"+ind).find(".help-block").html(vl[0]);
                });
            }

        });
        return false;
    });', \yii\web\View::POS_READY, 'my-ajax-form-submit');

现在对控制器操作进行了一些更改

public function actionContact()
{
    $model = new ContactForm();
    if ($model->load(Yii::$app->request->post())) {
        $success = false;
        $error = [];
        if($model->contact(Yii::$app->params['adminEmail']))    {
            $success = true;
        }   else    {
            $error = $model->getErrors();       //get validation error messages
        }
        header('Cache-Control: no-cache, must-revalidate');
        header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
        header('Content-type: application/json');
        echo json_encode(['success' => $success, 'error' => $error ]);

        Yii::$app->end();
    } else {
        return $this->render('contact', [
            'model' => $model,
        ]);
    }
}

已经完成了。

提交模态表格后，Yii2无刷新页面

1 个答案: