为什么我的Ajax表单提交不适用于Laravel 5

时间:2015-10-23 08:50:10

标签: php jquery ajax forms 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() }}

下面的Ajax Call示例代码:

            $("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没问题),如下所示:

<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”:“培训更新成功”}建议表单直接发布。

感谢帮助

1 个答案:

答案 0 :(得分:0)

问题在于我的js。我的js看起来像这样:

$("document").ready(function() {

    limitCharacters();
    $("#edit_academic_form").on('submit', updateAcademic);
    $("#edit_training_form").on('submit', updateTraining);
}

函数limitCharacters()有一些语法错误,因此防止它下面的代码被调用,因此Ajax不起作用的原因。我在limitCharacters中解决了问题,现在一切正常。