Question

我无法找到解决此问题的有效方法：我想更新我的视图的一部分而不重新加载它，我有一个表单，收集要传递给控制器的数据，控制器需要从DB获取数据并吐出JSON 到视图，以便它可以填充这些数据。

我试图改编这个http://tutsnare.com/post-data-using-ajax-in-laravel-5/，但它根本不起作用。收集的数据未到达控制器。

我的理解是视图中的javascript部分应该监听click事件并向控制器发送GET请求，控制器检查数据是否通过AJAX发送，从DB获取数据然后以JSON形式返回响应，然后更新视图。请问，有没有人有一个工作实例或可以解释？

Answer 1

使用JQuery的简单工作示例：

在你routes.php档案中：

Route::post('/postform', function () {
    // here you should do whatever you need to do with posted data
    return response()->json(['msg' => 'Success!','test' => Input::get('test')]);
});

并在您的刀片视图文件中：

<form method="POST" action="{{ url('postform') }}">
    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
    <input type="text" name="test" value="" />
    <input type="submit" value="Send" />
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $(document).ready(function()
        {
            var form = $('form');
            form.submit(function(e){
                e.preventDefault();
                $.ajax({
                    url: form.prop('action'),
                    type: 'post',
                    dataType: 'json',
                    data: form.serialize(),
                    success: function(data)
                    {
                        console.log(data);
                        if(data.msg){
                            alert( data.msg + ' You said: ' + data.test);
                        }
                    }
                })
            });

        });
    });
</script>

如您所见，大部分逻辑都是在JavaScript中完成的，与Laravel无关。所以如果这对你来说是不可理解的，我建议你去寻找jQuery ajax教程或rtfm：）

Answer 2

我有经验提交模态表单而不重新加载整个页面。我让用户在下拉列表中添加选项，然后重新填充该下拉列表中的项目，而不会在添加项目后重新加载整个页面。

您可以拥有自定义路由到您的控制器来处理该过程，并且可以通过javascript调用并返回json

Route::get('/profiles/create/waterSource',function(){

    $data = WaterSource::orderBy('description')->get();

    return Response::json($data);

});

然后是javascript

<script>
    $(document).on('submit', '.myForm-waterSource', function(e) {

        $.ajax({

            url: $(this).attr('action'),

            type: $(this).attr('method'),

            data: $(this).serialize(),

            success: function(html) {

                $.get('{{ url('profiles') }}/create/waterSource', function(data) {

                    console.log(data);

                    $.each(data, function(index,subCatObj){

                        if (!$('#waterSource option[value="'+subCatObj.id+'"]').length) {

                            $('#waterSource').append('<option value="'+subCatObj.id+'">'+subCatObj.description+'</option>');

                        }

                    });

                    $('#myModal-waterSource').modal('hide');

                    $('#modal-waterSource').val('');

                });

            }

        });

        e.preventDefault();

    });

</script>

您可以在Creating new Dropdown Option Without Reloading the Page in Laravel 5

查看完整的教程

ajax请求控制器更新laravel

2 个答案: