laravel-admin自定义页面中form禁用pjax使用ajax

admin | 2021年2月10日 | 学习偶记 | 评论已关闭 | 1748

1、use Encore\Admin\Widgets\Form

2、显示使用如下格式：

public function addSite(Content $content)
{
    $content-&gt;title('网站标题');
    $content-&gt;description('网站描述');
    $content-&gt;breadcrumb(
        ['text' =&gt; '首页', 'url' =&gt; '/'],
        ['text' =&gt; '导航']
    );

    $form = new wForm();
    //配置表单
    $form-&gt;setWidth(8, 3);
    //提交的url
    $form-&gt;action('ajax提交的act');
.....
    $form-&gt;changeSubmit(); //用button替换submit
    $form-&gt;disablePjax(); //禁止pjax
    $form_html = $form-&gt;render(); //生成html

    $content-&gt;view('模板文件',[变量=&gt; 值, 'form' =&gt; $form_html]);
    //如果想使用form的验证，保存form组件，用于ajax方法使用form的rules
    session(['form' =&gt; $form]);
    return $content;
}

public function addSite(Content $content)

{

$content->title('网站标题');

$content->description('网站描述');

$content->breadcrumb(

['text' => '首页', 'url' => '/'],

['text' => '导航']

);

$form = new wForm();

//配置表单

$form->setWidth(8, 3);

//提交的url

$form->action('ajax提交的act');

.....

$form->changeSubmit(); //用button替换submit

$form->disablePjax(); //禁止pjax

$form_html = $form->render(); //生成html

$content->view('模板文件',[变量=> 值, 'form' => $form_html]);

//如果想使用form的验证，保存form组件，用于ajax方法使用form的rules

session(['form' => $form]);

return $content;

}

3、

//增加站点 注意'form:eq(1)，因为laravel-admin的自定义页面本身有一个form
$(document).on('click', 'form:eq(1) :button', function (event) {
   //移除错误提示
   $(".inputError").remove();
   //移除错误提示的class
   $('.form-group').removeClass("has-error");
   //禁止重复提交
   $(this).button('loading');
  var form = $('form')[1];
  //var formData = $(form).serializeArray();
  var formData = new FormData(form);
  $.ajax({
   method: 'POST',
   url: form.action,
   data: formData,
   //ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉 //用于图片上传
   contentType:false,
   //取消帮我们格式化数据，是什么就是什么 //用于图片上传
   processData:false,
   success: function (data) {
      data = $.parseJSON(data);
      if(data.status)
      {
         //添加成功，清空form
         form.reset();
      }
      else
      {
         if(data.errors == '')
         {
            //没有校验错误
         }
         else
         {
            //进行校验错误处理
            var errors = data.errors;
            var error_info = errors.split('*');
            $.each(error_info,function(index,value){
               var label = value.split('|');
               var target = $('#'+label[0]);
               var error_info = '&lt;label class="control-label inputError"&gt;&lt;i class="fa fa-times-circle-o"&gt;&lt;/i&gt; '+label[1]+'&lt;/label&gt;';
               target.parent().before(error_info);
               target.closest('.form-group').addClass("has-error");
            });
            return false;
         }
      }
   },
   error:function(request){
      $.admin.swal({
         title: "发生错误",
         text: request.responseJSON.message,
         type: "error",
         showCancelButton: true
      });
   }
  });
   //按钮回复正常。
   $(this).button('reset');
   event.preventDefault();
});

//增加站点注意'form:eq(1)，因为laravel-admin的自定义页面本身有一个form

$(document).on('click', 'form:eq(1) :button', function (event) {

//移除错误提示

$(".inputError").remove();

//移除错误提示的class

$('.form-group').removeClass("has-error");

//禁止重复提交

$(this).button('loading');

var form = $('form')[1];

//var formData = $(form).serializeArray();

var formData = new FormData(form);

$.ajax({

method: 'POST',

url: form.action,

data: formData,

//ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉 //用于图片上传

contentType:false,

//取消帮我们格式化数据，是什么就是什么 //用于图片上传

processData:false,

success: function (data) {

data = $.parseJSON(data);

if(data.status)

{

//添加成功，清空form

form.reset();

}

else

{

if(data.errors == '')

{

//没有校验错误

}

else

{

//进行校验错误处理

var errors = data.errors;

var error_info = errors.split('*');

$.each(error_info,function(index,value){

var label = value.split('|');

var target = $('#'+label[0]);

var error_info = '<label class="control-label inputError"><i class="fa fa-times-circle-o"></i> '+label[1]+'</label>';

target.parent().before(error_info);

target.closest('.form-group').addClass("has-error");

});

return false;

}

error:function(request){

$.admin.swal({

title: "发生错误",

text: request.responseJSON.message,

type: "error",

showCancelButton: true

});

}

});

//按钮回复正常。

$(this).button('reset');

event.preventDefault();

});

4、模板form部分 {!! $form !!} 参见2

5、提交后存盘的代码

    public function storeSite(Request $request)
    {
        $errors = '';
        $ret = [
            'status' =&gt; false,
            'errors' =&gt; $errors
];
        $form = session('form');
        //$form-&gt;sanitize(); //移除 _token等等不需要的值
        //移除忽略字段
        foreach (['ignore_name'] as $key) {
            request()-&gt;request-&gt;remove($key);
        }
        //表单校验
        $validationMessages = $form-&gt;validate($request);
        //校验失败 返回错误信息 $validationMessages === false
        if($validationMessages){
            //$errors = json_encode($validationMessages-&gt;getMessages(), JSON_UNESCAPED_UNICODE);
            foreach($validationMessages-&gt;getMessages() as $lable =&gt; $error)
            {
                //如果是多个错误信息
                if(is_array($error))
                {
                    for($i = 0; $i &lt; count($error); $i++)
                    {
                        $errors .= $lable.'|'.$error[$i].'*';
                    }
                }
                else
                {
                    $errors = $lable.'|'.$error.'*';
                }
            }
            $ret['errors'] = rtrim($errors,'*'); //删除最后一个*
            //页面返回
            //return response()-&gt;json(['errors' =&gt; \Arr::dot($validationMessages-&gt;getMessages())], 422);
        }
        else
        {
            $site_array = $request-&gt;all();
            unset($site_array['_token']);
            $ret = FrontSite::storeSite($site_array);
        }
        return json_encode($ret, JSON_UNESCAPED_UNICODE);
    }