我正在研究这个laravel 5应用程序,我似乎无法弄清楚为什么我的Ajax调用不适合这个特定的表单,因为它一直在为其他表单工作得很好。示例代码如下:
{!! Form::model($training, ['url' => 'trainings/' . $training->id,
'method' => 'PUT',
'class' => 'form-horizontal',
'id' => 'edit_training_form',
'role' => 'form']) !!}
// Form body
{{ Form::close() }}
示例代码如下:
$("document").ready(function() {
$("#edit_academic_form").on('submit', updateAcademic);
$("#edit_training_form").on('submit', updateTraining);
}
function ajaxCall(context) {
$.ajax({
type: "PUT",
data: context.serialize(),
url: context.attr('action'),
dataType: 'json',
cache: false,
beforeSend: function() {
$(".validation-errors").hide().empty();
$(".success-message").hide().empty();
},
success: function(data){
$(".success-message").append(data.message).show();
$(".success-message").delay( 2000 ).fadeOut();
},
error: function(data){
var errors = data.responseJSON;
console.log(errors);
// Render errors with JS
$.each(errors, function(index, value)
{
if (value.length != 0)
{
$(".validation-errors").append('<li>'+ value +'</li>');
}
});
$(".validation-errors").show();
}
});
}
function updateTraining(e){
e.preventDefault();
ajaxCall($(this))
}
function updateAcademic(e){
e.preventDefault();
ajaxCall($(this))
}
updateAcademic的调用工作得很好,但updateTraining不起作用。Firebug不显示任何错误。这是直接表单提交。我已经清除了浏览器缓存,以确保js正在读取,改变浏览器,但没有结果。从我的浏览器中查看源代码,表单定义良好(id是ok的),如下所示:
<form method="POST" action="http://localhost:8000/trainings/1"
accept-charset="UTF-8" class="form-horizontal"
id="edit_training_form" role="form">
<input name="_method" type="hidden" value="PUT">
<input name="_token" type="hidden" value="QvvgMIWZN1VYGUOF2zGE8ALgVnAYaZUS5SseW4i5">
</form>
编辑Firebug不给出任何错误。我的控制器是这样的:
public function update(UpdateTrainingRequest $request, $id)
{
$data = $request->all();
$this->training->save_training($data, $id);
$result['message'] = "Training Updated Successfully";
return response()->json($result);
}
当我点击保存时,我得到的是一个空白的浏览器页面,上面写着:
{"message":"Training Updated Successfully"}提示表单正在直接发布。
感激帮助
问题出在我的js上。我的js看起来像这样:
$("document").ready(function() {
limitCharacters();
$("#edit_academic_form").on('submit', updateAcademic);
$("#edit_training_form").on('submit', updateTraining);
}
函数limitCharacters()有一些语法错误,从而阻止了它下面的代码被调用,这就是Ajax不能工作的原因。我解决了limitCharacters中的问题,现在一切正常。