Javascript Laravel:没有通过ajax发送数据
我制作了一个定制的Jquery插件来帮助我通过Ajax轻松地将数据发送到服务器,该服务器是为适应laravel而定制的,但显然我无法发送任何数据。当我使用dd($request->all())检查发送到laravel服务器的内容时,我在控制台中收到一个空数组,表示我没有发送任何内容。下面是我的代码 JS HTMLJavascript Laravel:没有通过ajax发送数据,javascript,jquery,laravel,Javascript,Jquery,Laravel,我制作了一个定制的Jquery插件来帮助我通过Ajax轻松地将数据发送到服务器,该服务器是为适应laravel而定制的,但显然我无法发送任何数据。当我使用dd($request->all())检查发送到laravel服务器的内容时,我在控制台中收到一个空数组,表示我没有发送任何内容。下面是我的代码 JS HTML 唱片集名称 专辑封面图片 此处为块级帮助文本示例 相册图像 创建相册 我想我的JS没有将我的数据发送到服务器,但我不知道为什么。请帮助您是否在路由文件中定义了一个完全指向Album
唱片集名称
专辑封面图片
此处为块级帮助文本示例
相册图像
创建相册
我想我的JS没有将我的数据发送到服务器,但我不知道为什么。请帮助您是否在路由文件中定义了一个完全指向
AlbumController@store
Controller method您是否在路由文件中定义了一个完全指向AlbumController@store
控制器方法有控制台错误吗?没有控制台错误吗?没有控制台错误吗错误我已将其正确路由到我的唱片控制器的存储方法。它也提供了一个响应!问题是,发送到函数的请求表明我没有向控制器发送任何信息。它说这是一个空的ArrayID,您可以检查控制台,数据是否发送到服务器,如果是,可以尝试打印dd($request->all()),并查看发送的内容是的,我已将其正确路由到我的唱片控制器的存储方法。它也提供了一个响应!问题是,发送到函数的请求表明我没有向控制器发送任何信息。它说这是一个空的arraydid,您可以检查控制台,是否有数据发送到服务器,如果有,可以尝试打印dd($request->all()),并查看发送的内容
(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));
<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>