Form表单ajax提交【pjax提交】
yoyocmf 2019-02-23 10:25:33

  1、ajax提交后，pjax 刷新指定dom，也可以不加pjax

PHP Code复制内容到剪贴板
  1. <!-- ID是必填的，指定无刷新的dom名称 -->  
  2. <?php \yii\widgets\Pjax::begin(['id' => 'comment-container', 'linkSelector' => false]) ?>  
  3.   
  4. .. //正常输入控制器传过来的变量即可  
  5.   
  6.   
  7. <!-- data-ajax 必填表示为ajax提交 / data-refresh-pjax-container表示刷新哪一个dom  -->  
  8. <?php $form = ActiveForm::begin(['action' => Url::to(['/comment/create']), 'options' => ['data-ajax' => 1, 'data-refresh-pjax-container' => 'comment-container']]); ?>  
  9.   
  10.         .. //正常写FORM  
  11.         <?= Html::submitButton('提交', [  
  12.             'class' => 'btn btn-primary',  
  13.         ]) ?>  
  14.   
  15. <?php ActiveForm::end(); ?>  
  16.   
  17.   
  18. <?php \yii\widgets\Pjax::end() ?>  

 

FORM还支持属性：

data-refresh ： 提交完成后是否刷新当前页（默认为否）

data-confirm ： 提交之前是否弹出询问框（默认为否）

data-callback： 提交后的回调，支持funtion方法，支持string

data-method：传输方式，post/get

data-params 带参数传递，如：

XML/HTML Code复制内容到剪贴板
  1. 'data-params' => [ 'time' => $model['time'] ],    
  2.     
  3.     
  4. 'data-callback' => '$("#modal-login").modal("hide")'    
  5.     
  6. 'data-callback' => 'window.parent.location.replace("'.$callbackUrl.'");'  

 

 

 

 

2、定制ajax提交：

PHP Code复制内容到剪贴板
  1.         <?php $form = ActiveForm::begin([    
  2.             'options' => [    
  3.                 'class' => 'layui-form form-horizontal',    
  4.             ],    
  5.             'fieldConfig' => [    
  6.                 'template' => '{label}<div class="col-sm-10">{input}</div><div class="col-sm-12">{error}</div>',    
  7.                 'labelOptions' => ['class' => 'col-sm-2 control-label'],    
  8.             ],    
  9.             'id' =>'contractForm',    
  10.             'enableAjaxValidation' => true, //必须设置，表示该表单以ajax提交    
  11.         ]); ?>    
  12.     
  13.     
  14. <!-- 重要lay-filter lay-submit -->    
  15. <?= Html::submitButton($model->isNewRecord ? '新增' : '更新', ['class' => $model->isNewRecord ? 'btn btn-success btn-flat' : 'btn btn-primary btn-flat','lay-submit'=>'','lay-filter'=>'contractForm']) ?>    
  16.     
  17.         <?php ActiveForm::end(); ?>    
  18.     
  19.     
  20.     <!-- JS注册到底部 -->    
  21. <?php $this->beginBlock('js') ?>    
  22.     <script>    
  23.         layui.use(['form', 'laydate'], function(){    
  24.             var form = layui.form, laydate = layui.laydate;    
  25.     
  26.             //同时绑定多个    
  27.             lay('.select-time-item').each(function(){    
  28.                 laydate.render({    
  29.                     elem: this    
  30.                     ,trigger: 'click'    
  31.                 });    
  32.             });    
  33.     
  34.             //监听提交    
  35.             form.on('submit(contractForm)', function(data){    
  36.                 var action = data.form.action,field = data.field;    
  37.                 var loading = layer.load(2);  
  38.                 //表单提交    
  39.                 $.ajax({    
  40.                     url: action,    
  41.                     type: 'post',    
  42.                     data: field,    
  43.                     success: function (res) {    
  44.                         layer.close(loading);    
  45.                         if(res.errcode){    
  46.                             layer.open({    
  47.                                 title: '错误'    
  48.                                 ,content: res.errmsg    
  49.                             });    
  50.                         }else{    
  51.                             layer.msg(res.errmsg, {    
  52.                                 time: 1000 // 2秒关闭（如果不配置，默认是3秒）    
  53.                             }, function(){    
  54.                                 history.go(-1);    
  55.                             });    
  56.                         }    
  57.                     },    
  58.                     error: function () {   
  59.                         layer.close(loading);    
  60.                         layer.open({    
  61.                             title: '错误'    
  62.                             ,content: '系统错误，请联系管理员'    
  63.                         });    
  64.                         return false;    
  65.                     }    
  66.                 });    
  67.                 return false;    
  68.             });    
  69.     
  70.     
  71.         });    
  72.     </script>    
  73. <?php $this->endBlock() ?>    

 

 

 

本文来自于：http://www.yoyo88.cn/note/yoyocmf/413.html

上一篇 编辑器
下一篇 选择用户（多选 / 单选）插件
相关的文章
Powered by yoyo苏ICP备15045725号