如何在Yii2中利用Ajax对表单进行提交

如何在Yii2中利用Ajax对表单进行提交?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

前言

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

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

表单部分

<?php $form = ActiveForm::begin([   'id'   => $model->formName(),   'action' => ['/apitools/default/index'] ]); ?>

Ajax

<?php $js = <<<JS // get the form id and set the event $('form#{$model->formName()}').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; $this->registerJs($js);

如果你使用了 JsBlock,你还可以这样写:

<?php JsBlock::begin() ?>   <script>     $(function () {       jQuery('form#apitool').on('beforeSubmit', function (e) {         var $form = $(this);         $.ajax({           url: $form.attr('action'),           type: 'post',           data: $form.serialize(),           success: function (data) {             // do something           }         });       }).on('submit', function (e) {         e.preventDefault();       });   </script> <?php JsBlock::end() ?>

关于如何在Yii2中利用Ajax对表单进行提交问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。