Yii2单页应用：Ajax提交后避免重定向，实现局部内容更新

看起来你遇到的核心问题是：Ajax提交表单后，虽然数据库更新成功，但浏览器却跳转到了局部视图页面，没有把返回的内容更新到#singleObjContainer容器里。这大概率是表单的默认提交行为没有被正确拦截，导致Ajax请求和浏览器的默认表单提交同时触发，最终后者覆盖了Ajax的回调逻辑。下面是具体的解决方案：

1. 给表单添加唯一ID，方便JS控制 #

首先，在初始化ActiveForm的时候，给表单指定一个唯一ID，这样后续可以精准阻止它的默认提交行为：

<?php $form = yii\bootstrap\ActiveForm::begin([
    'options' => ['id' => 'course-create-form'], // 添加表单ID
]); ?>

2. 修改AjaxSubmitButton的配置，拦截默认提交 #

接下来调整AjaxSubmitButton的配置，重点是阻止表单的默认提交，并确保Ajax回调正确执行：

<?php AjaxSubmitButton::begin([
    'label' => 'Save',
    'ajaxOptions' => [
        'type' => 'POST',
        'url' => Url::to(['course/create-form']),
        'beforeSend' => new \yii\web\JsExpression('function(jqXHR, settings) {
            // 彻底阻止表单的默认提交行为
            $("#course-create-form").off("submit").on("submit", function(e) {
                e.preventDefault();
                return false;
            });
        }'),
        'success' => new \yii\web\JsExpression('function(html) {
            // 把返回的视图内容更新到目标容器
            $("#singleObjContainer").empty().append(html);
            // 可选：如果需要同步更新对象列表，在这里重新加载列表区域
            // $("#objectListContainer").load("'.Url::to(['course/index']).'");
        }'),
        'error' => new \yii\web\JsExpression('function(xhr, status, error) {
            // 调试用：查看Ajax请求的错误信息
            console.error("Ajax提交失败:", error);
        }'),
    ],
    'options' => ['class' => 'btn btn-success'],
    // 移除type="submit"，避免触发默认提交逻辑
]); ?>
<?php AjaxSubmitButton::end(); ?>

3. 优化控制器逻辑，确保返回内容正确 #

你的控制器代码框架没问题，可以做一些小优化，避免空指针并确保返回的局部视图无布局：

public function actionCreateForm() {
    $model = new Course();

    if ($model->load(Yii::$app->request->post())) {
        $image = UploadedFile::getInstance($model, 'img');
        // 先判断是否有上传文件，避免空指针异常
        if ($image) {
            $model->img = $image->baseName . "." . $image->extension;
        }

        if ($model->save()) {
            // 保存成功后再处理文件上传
            if ($image) {
                $image->saveAs(Yii::getAlias('@uploads/') . 'courses/' . $model->img);
            }
            $courseStudents = $this->getCourseStudents($model['id']);
            // 返回详情视图，renderPartial默认不加载布局
            return $this->renderPartial('_viewForm', [
                'model' => $model, 
                'courseStudents' => $courseStudents
            ]);
        }
    }
    // 加载失败或验证不通过，返回带错误提示的创建表单
    return $this->renderPartial('_createForm', ['model' => $model]);
}

4. 调试排查技巧 #

如果还是有问题，可以按以下步骤排查：

• 打开浏览器开发者工具（F12）的Network标签，查看Ajax请求是否成功发送，HTTP状态码是否为200，响应内容是否是预期的HTML。
• 在success回调里添加console.log(html)，查看返回的内容是否正确。
• 检查页面中是否有其他JS代码绑定了表单的submit事件，干扰了当前逻辑。

这样修改后，Ajax提交应该就能正常更新#singleObjContainer容器，不会再跳转到局部视图页面了。

内容的提问来源于stack exchange，提问作者Michal Yosef