为什么我的Ajax表单提交不工作在Laravel 5


Why is my Ajax Form submit not working in Laravel 5

我正在研究这个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中的问题,现在一切正常。