Yii2使用ajax提交模式表单

我已经成功地创建了模态表单，但是我不能用ajax提交它。每次我点击submit按钮时，它都不会停留在索引页面中，而是从我的控制器中显示

echo 1

我的控制器

public function actionCreate()
{
    $model = new Testing();

    if ($model->load(Yii::$app->request->post())) {
       if($model->save()){
            echo 1;
        }else{
            echo 0;
        }
    }else{

        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }
}

我的表格

 <div class="testing-form">

    <?php $form = ActiveForm::begin(['id' => $model->formName()]); ?>

    <?= $form->field($model, 'test')->textInput(['maxlength' => true]) ?>

    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

<?php
$this->registerJS("

$('form#{$model->formName()}'.on('beforeSubmit', function(e)
{
    var \$form = $(this);
    $.post(
        \$form.attr('action'),
        \$form.serialize()
    )
        .done(function(result) {
        if(result == 1)
        {
            $(\$form).trigger('reset'); 
            $.pjax.reload({container:'#issuehrGrid'});
        }else
        {

            $('#message').html(result.message);
        }
        }).fail(function()
        {
            console.log('server error');
        })
    return false;
});"    
);     
?>

我怀疑它会向你展示空白代码页，上面有“代码> 1”/代码>，这是因为在第一次提交之后，你的PJAX网格通过语句
重新加载。
$.pjax.reload({container:'#issuehrGrid'});

重新加载您的<代码>前提交/ <代码>事件不会再次绑定到表单，因为表单“代码> HTML 再次加载，当您提交表单第二次时，它只做一个简单的表单提交，并显示空白页，带有“代码> 1”/代码>，您需要使用<代码> PJAX：PJAX完成< <代码>事件，因此，当网格重新加载时，您的脚本将
beforesmit
事件再次绑定到表单

此外，脚本中存在语法错误，应该予以修复。将脚本更改为以下内容

<?php
$formName = $model->formName();
$js = <<<JS
$(document).on("ready pjax:complete",function(){
    $('form#{$formName}').on('beforeSubmit', function(e){
        var \$form = $(this);
        $.post(
            \$form.attr('action'),
            \$form.serialize()
        ).done(function(result) {
            if(result == 1)
            {
                $(\$form).trigger('reset'); 
                $.pjax.reload({container:'#issuehrGrid'});
            }else
            {
                $('#message').html(result.message);
            }
            }).fail(function()
            {
                console.log('server error');
            })
        return false;
    });
});
JS;
$this->registerJS(
    $js,
    \yii\web\View::POS_READY
);
?>



更新

不要忘记更改控制器操作代码，并将
echo 1
更改为
return 1
，将
echo 0
更改为
return 0
，因为您正在控制器操作代码中执行此操作。不知道你在做什么或试图做什么你是否试图提交表单，然后显示消息并保持在同一表单上？另外，您应该只
返回1
而不是
回显1
谢谢您的帮助，我已尝试按照您所说的更改脚本，但仍然无法正常工作。我可以问一下为什么像这样使用斜杠前置变量
\$form
，我以前从未见过它。我使用F12查看源代码，斜杠不见了，只需显示
$form
，这就是它不起作用的原因吗？我使用了
herdoc
语法来添加脚本，并使用“\”来转义，这样它就不会将它与php弄错，并强制将其解析为php变量，不起作用的是，当加载页面或单击按钮时，控制台上是否出现错误@SaoHono，控制台中没有错误，但它确实有此警告
[Deprecation]主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户的体验产生有害影响。如需更多帮助，请查看https://xhr.spec.whatwg.org/.
ok，当您单击submit时，控制台或ajax请求是否显示任何错误@SaoHo，您需要更改
echo 1到
返回1和
echo 0
到
在controllerno中返回0
，这是控制台，然后单击submit。这是在提交之后
<?php
$formName = $model->formName();
$js = <<<JS
$(document).on("ready pjax:complete",function(){
    $('form#{$formName}').on('beforeSubmit', function(e){
        var \$form = $(this);
        $.post(
            \$form.attr('action'),
            \$form.serialize()
        ).done(function(result) {
            if(result == 1)
            {
                $(\$form).trigger('reset'); 
                $.pjax.reload({container:'#issuehrGrid'});
            }else
            {
                $('#message').html(result.message);
            }
            }).fail(function()
            {
                console.log('server error');
            })
        return false;
    });
});
JS;
$this->registerJS(
    $js,
    \yii\web\View::POS_READY
);
?>