代码之家 › 专栏 › 技术社区 › Rafiq

Laravel使用Ajax以一种形式更新数据和文件?当方法/type='PUT'

request laravel ajax html javascript

Rafiq · 技术社区 · 5 年前

好吧,当我不使用ajax直接从表单向服务器发送数据时,我会在值为“PUT”的地方添加隐藏的_方法参数->一切都像是更新表单的魅力。但当我尝试同样的方法时,ajax在控制器更新函数中接收null for$request对象。现在我感到害怕,因为删除我必须使用方法class='POST'。

我同时使用了class='POST'或type='POST'方法,但运气不佳。

Route::resource('contents', 'ContentController');
let url_content_update = "{{ route('contents.update', ':id') }}";

WebApp.ContentController.onClickUpdateButton = function () {
    var _id = $("#form_id").data('_id');
    var form = $("#form_id")[0];
    var formData = new FormData(form);
    console.log(formData.get('title'));// console print "I am title" just fine.
    $.ajax({
         headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: url_content_update.replace(':id', _id),
        method: 'PUT',
        contentType:false ,
        processData: false,
        data: formData,
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    $('#status').html('Upload a file (compulsory):<b> Uploading -> ' + (Math.round(percentComplete * 100)) + '% </b>');
                }
            }, false);

            return xhr;
        },
        success: function (result) {

        },
        error: function (jqXHR, exception) {
        }

    })

}

控制器: 已成功接收$id=383的值。 但在$request对象中找到null;

 public function update(Request $request,  $id)
    {
        $content = Content::find($id); 
        $content->app_id=$request->app_cat; 
        $content->cat_id=$request->category;
        $content->sub_cat_id=$request->subcategory;
        $content->title=$request->title;
        $content->content_type=$request->type;
        if($request->type==3||$request->type==4||$request->type==5){
            //return json_encode($request->hasFile('any_file'));
            if($request->hasFile('any_file')){
                $content->content=$this->storeFile($request);
            }
        }else{
            $content->content=$request->content;
        }

        $fileNameToStore='no_image.jpg';
        if($request->hasFile('cover_image')){
            $this->validate($request,[
                'cover_image'=>'image|nullable|max:1999'
            ]);
            $content->cover_image=$this->storeImage($request);
        }

        $content->save();
        $output = array("message"=>"Content updated successfully", "status" => "200");
        echo json_encode($output);
    }

0 回复 | 直到 5 年前

Andy Song 5 年前

这是一个众所周知的问题 issue 自2016年以来,以下是您提交 put 以传统的形式。

<form action="/foo/bar" method="POST">
    @method('PUT')
    @csrf
</form>

所以基本上如果你想使用 FormData 你不能使用 放 或 patch 作为方法,你必须使用 post .此外,你还需要告诉拉威尔这个请求应该是 PUT 所以你的代码必须是这样的

   ...
            var formData = new FormData(form);
            //this line is equivalent with @method('PUT') in traditional form
            formData.append('_method', 'PUT');
   ...
            //this line is equivalent with method="POST" in traditional form
            method: 'POST',

不幸的是,如果您想使用,这是唯一的解决方案 FormData .