为什么我的 Ajax 表单提交在 Laravel 5 中不起作用答案

【问题标题】：Why is my Ajax Form submit not working in Laravel 5为什么我的 Ajax 表单提交在 Laravel 5 中不起作用
【发布时间】：2016-01-22 18:05:16
【问题描述】：

我正在开发这个 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 调用示例代码如下：

            $("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":"Training Updated Successfully"} 提示表单正在直接发布。

感谢帮助

【问题讨论】：

你遇到了什么错误？？
我没有收到任何错误@NiranjanNRaju。查看问题的编辑部分。
trainings 函数在哪里？？
你在说哪些培训？
好的，我明白了。我有这样的路线 Route::put('trainings/{trainings}', 'TrainingsController@update');

标签： php jquery ajax forms laravel-5

【解决方案1】：

问题出在我的 js 上。我的 js 看起来像这样：

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

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

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

【讨论】：