Question

我正在尝试使用以下代码向Laravel提交AJAX表单。提交表单后，所有数据均按预期方式保存在数据库中，但以下字段在数据库中显示为NULL。

<textarea name="content" id="editor"></textarea>

<script type="text/javascript">
  $.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });

$(".btn-submit-add-video").each(function(){
  $(this).on("click",function(e){
    e.preventDefault();

    let form = $(this).closest('form');

    $.ajax({
      type:'POST',
      url: form.attr('action'),
      data: form.serialize(),
      success:function(data){
        alert(data.successful);
      }
    });
  })
});
</script>

public function addVideo(Request $request)
    {
        $addVideo = new cms_videos;
        $addVideo->VideoStatus = $request->VideoStatus;
        $addVideo->VideoTitle = $request->VideoTitle;
        $addVideo->VideoStrapline = $request->VideoStrapline;
        $addVideo->VideoURL = $request->VideoURL;
        $addVideo->VideoDescription = $request->content;
        $addVideo->VideoTags = $request->VideoTags;
        $addVideo->MetaActName = $request->MetaActName;
        $addVideo->MetaRegion = $request->MetaRegion;
        $addVideo->MetaGenre = $request->MetaGenre;
        $addVideo->MetaVenue = $request->MetaVenue;
        $addVideo->VideoCoverPhoto = $request->VideoCoverPhoto;
        $addVideo->save();

        return response()->json(['successful'=>'Video successfully added']);
    }

进行了一些研究后，我被告知将以下代码添加到上面显示的代码的顶部： CKEDITOR.instances.SurveyBody.updateElement（）;

现在，所有数据均按预期提交到数据库。但是，当我现在提交表单而不是弹出警告“ Successful”的警告时，我现在被重定向到表单操作URL，其中显示“ Successful”。如何停止这种重定向，并在提交表单的页面上显示警报？

Answer 1

我不确定，但是我认为当您执行e.preventDefault（）时问题就在这里，因为它适用于单击按钮而不适用于表单提交。尝试一下，希望对您有所帮助。

注意：您必须在表单中添加 upload_video 类

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
// If the button is type of submit you can remove this part of code
$(".btn-submit-add-video").each(function(){
    $(this).on("click",function(e){
        e.preventDefault();
        let form = $(this).closest('form.upload_video');
        form.submit();
    })
});
//
$("form.upload_video").on('submit',function(e){
    e.preventDefault();
    let form = $(this),data=form.serialize();
    //
    let content=FCKeditorAPI.GetInstance('content').getData();
    data['content']=content;
    //
    $.ajax({
        type:'POST',
        url: form.attr('action'),
        data: data,
        success:function(data){
            alert(data.successful);
        }
    });
});
</script>

这部分

let content = FCKeditorAPI.GetInstance（'content'）。getData（）;

可能不正确，因为我现在不使用CKEDITOR，并且我无法对其进行测试，但是您可以在发送ajax请求之前确保console.log（）并确保内容随变量存在预期的。

使用CKeditor

1 个答案: