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

Posted 2023-03-14

【中文标题】ajax 请求控制器更新 laravel 中的视图

【英文标题】：ajax request to controller to update view in laravel

【发布时间】：2015-10-09 18:36:26

【问题描述】：

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

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

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

【问题讨论】：

使用常规 POST 请求或通过 AJAX 向控制器发布表单与控制器相同。如果您的控制器和表单在没有 AJAX 的情况下工作，那么问题出在 JavaScript 中，与 Laravel 控制器无关。

好的，但是假设您以常规方式发布到控制器，您如何向视图输出 JSON 响应而不是重新加载页面？整个 AJAX 发布的目的不是为了防止重新加载吗？

你很容易吐出 json return response()->json(['key'=>'value']);。这将返回带有正确 JSON 标头的正确响应。重新加载或不重新加载页面都是在 JavaScript 中完成的。您将 AJAX 请求发送到控制器并获得 JSON 响应，然后您必须使用您自己的数据填充视图，使用您需要的任何 JS 代码。

澄清一下，Laravel 本身不会更新您的视图或通过 ajax 填充您的表单。你必须自己做。这是通过 JavaScript 而不是 php 完成的。 Laravel 是 PHP 框架，不包含任何 JavaScript 逻辑。

是的，我知道 laravel 需要 ajax 来填充，关键是我没有找到一个可行的例子，因此遇到了困难

【参考方案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 :)

【讨论】：

我正在尝试这段代码，我修改为发送我的数据而不是测试，我得到一个 500 内部服务器错误

..等等，我终于能够以json的形式返回我需要的数据，现在如何修改回调函数来填充一个div？

但是结果似乎是数组形式而不是 json 形式

你可以随意修改回调函数。如果你不知道怎么做，你应该学习 Javascript 或发布另一个关于它的问题。它与 Laravel 无关。如果您愿意，它是纯 html 操作，使用 JS 或 jQuery。

传递给 ajax 成功回调的数据对象将包含 URL 将返回的确切内容。如果你传递字符串，你会得到字符串。如果你传递 json，你会得到 json（它也是字符串，但是如果你在 http headers 中将 content-type 设置为 json，它会自动转换为 object/array）。如果将数值数组转换为json，在JS中就是数组，传递assoc数组时，会得到对象。所以你真的应该先学习一些JS。您想做的事情非常具体，您没有提供任何示例，因此目前无法为您提供任何进一步的帮助。

【参考方案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查看完整教程