javascript - Laravel:没有通过ajax发送数据

Question

我制作了一个自定义 Jquery 插件来帮助我轻松地通过 Ajax 将数据发送到为适合 Laravel 定制的服务器，但显然我无法发送任何数据。当我使用 dd($request->all()) 检查已发送到 laravel 服务器的内容时​​，我在控制台中收到一个空数组，这意味着我没有发送任何内容。下面是我的代码

JS

(function($){
    'use strict'

    $.fn.lajax=function(options){


        //overwrite options
        var optns=$.extend({
            dataType: 'json',
            debug:false,
            processData: true,
            headers:{
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            acceptedInputFile:'/*/',

            //functions that are very similar to the ajax optns but differ a little 
            //as the paramters give easy access to the ajax form element
            lajaxBeforeSend: function(form,formData,jqXHR,settings){},
            lajaxSuccess: function(form,formData,data,textStatus,jqXHR){},
            lajaxError: function(form,formData,jqXHR,textStatus,errorThrown){},
        },options);



        //loop through every form, 'this' refers to the jquery object (which should be a list of from elements)
        this.each(function(index,el){

            $(el).submit(function(e){
                //prevent submission
                e.preventDefault();

                //form jquery instance & form data
                var $form=$(this);
                var formData = new FormData($form[0]);

                //catch url where the ajax function is supposed to go
                var url=$form.attr('action');

                //check if REST based method is assigned
                if($form.find('input[name="_method"]').length)
                {
                    var method=$(this).find(':input[name="_method"]').val().toUpperCase();
                    if(optns.debug)
                        console.log("'"+method+"' method registered for form submission");
                }
                //If no REST method is assigned, then check method attr
                else if($form.attr('method'))
                {
                    var method=$form.attr('method').toUpperCase();
                    if(optns.debug)
                        console.log("'"+method+"' method registered for form submission");
                }
                //method is not assigned
                else
                {
                    var method='GET';
                    if(optns.debug)
                        console.log('The form that submitted has no method type assigned. GET method will be assigned as default');
                }



                //object that will be fed into jquerys ajax method
                var ajax_options={
                    url: url,
                    method: method,
                    beforeSend: function(jqXHR,settings){
                        console.log(jqXHR);
                        console.log(settings);
                        if(optns.debug)
                            console.log('executing beforeSend function');
                        optns.lajaxBeforeSend($form,formData,jqXHR,settings);
                    },
                    success: function(data,textStatus,jqXHR){
                        if(optns.debug)
                            console.log('executing success function');
                        optns.lajaxSuccess($form,formData,data,textStatus,jqXHR)
                    },
                    error: function(jqXHR,textStatus,errorThrown){
                        if(optns.debug)
                            console.log('error encountered. ajax error function procked');
                        optns.lajaxError($form,formData,jqXHR,textStatus,errorThrown);

                        var errors = jqXHR.responseJSON;
                        console.log(errors);
                    },
                }

                //check if files are included in the submitted form if the method is not GET
                if($form.find('input:file').length && method!='GET'){
                    ajax_options.processData=false;
                    ajax_options.contentType=false;
                    ajax_options.cache=false;
                    ajax_options.data=formData;
                }


                if(optns.debug)
                    console.log('About to send ajax request');

                //sending request here
                $.ajax(ajax_options);

                if(optns.debug)
                    console.log('finished with form '+$form+'. Looping to next form if exists');

                return false;
            });

        });

        return this;
    }

}(jQuery));

HTML

<form class="lajax" action="{{ action('AlbumController@store') }}" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label>Album Name</label>
                    <input type="text" name="name" class="form-control">                                                
                </div>

                <div class="form-group">
                    <label for="coverFile">Album Cover Image</label>
                    <input  name="cover" type="file" id="coverFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>

                <div class="form-group">
                    <label for="albumFiles">Album Images</label>
                    <input type="file" name="photos[]" multiple>
                </div>

                <button type="submit" class="btn btn-primary">Create Album</button>
            </form>

我认为我的 JS 没有将我的数据发送到服务器，但我不确定为什么。请帮忙

Answer 1

您是否在路由文件中定义了精确指向 AlbumController@store Controller 方法的 Post 路由