首页 文章

ajax请求控制器更新laravel中的视图

提问于
浏览
0

我找不到解决这个问题的工作方案:我想更新我的视图的一部分而不重新加载它,我有一个表单收集要传递给控制器的数据,控制器需要从数据库中获取数据并向视图吐出JSON,以便可以填充此类数据 .

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

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

2 回答

  • 1

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

    您可以拥有自定义路由到您的控制器来处理该过程,并可以通过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查看完整的教程

  • 0

    使用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 :)

相关问题