前言

Yii2 现在使用 JS 都必须要注册代码了。

要实现 Ajax 提交，有两种方法。一是直接在 ActiveForm 调用 beforeSubmit 参数，但是个人认为这样没有很好的把 JS 和 HTML 分开，所以我们这篇文章主要介绍第二种方法 - 外部写 JS 方法。

表单部分

<code><span class="hljs-meta"><?php</span> $form = ActiveForm::begin([ <span class="hljs-string">'id'</span> => $model->formName(), <span class="hljs-string">'action'</span> => [<span class="hljs-string">'/apitools/default/index'</span>] ]); <span class="hljs-meta">?></span> </code>

Ajax

<code><span class="hljs-meta"><?php</span> 
$js = <span class="hljs-string"><<<JS 
    // get the form id and set the event 
    $('form#<span class="hljs-subst">{$model->formName()}</span>').on('beforeSubmit', function(e) 
    {
        var \$form = $(this); 
        // do whatever here, see the parameter \$form? is a jQuery Element to your form 
    }).on('submit', function(e){ 
        e.preventDefault(); 
    }); 
JS;</span> 
<span class="hljs-keyword">$this</span>->registerJs($js); 
</code>

如果你使用了 JsBlock，你还可以这样写：

<code><span class="hljs-meta"><?php</span> JsBlock::begin() <span class="hljs-meta">?></span> 
<script> $(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ 
    jQuery(<span class="hljs-string">'form#apitool'</span>).on(<span class="hljs-string">'beforeSubmit'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ 
        <span class="hljs-keyword">var</span> $form = $(this); 
        $.ajax({
            url: $form.attr(<span class="hljs-string">'action'</span>), 
            type: <span class="hljs-string">'post'</span>, 
            data: $form.serialize(), 
            success: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data)</span> </span>{
                <span class="hljs-comment">// do something</span> 
            } 
        }); 
    }).on(<span class="hljs-string">'submit'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ 
        e.preventDefault(); 
    }); 
</script> 
<span class="hljs-meta"><?php</span> JsBlock::end() <span class="hljs-meta">?></span></code>