将 AJAX 与 Laravel GET 请求一起使用不起作用答案

【问题标题】：Using AJAX with Laravel GET request not working将 AJAX 与 Laravel GET 请求一起使用不起作用
【发布时间】：2018-11-13 03:10:12
【问题描述】：

我要做的是在主布局上动态加载@yield('somecontent.content')。仅出于提供信息的目的，我有以下内容：

控制器：

public function someFunction()
{
    //DB logic here
    return view('/exampleView')
    ->with($dataset1)
    ->with($dataset2)
    ->with($dataset3)
    ->with($dataset4);
}

路线：

Route::get('someRoute', ['as' => 'theRoute', 'uses' => 'someController@someFunction']);

Ajax/jquery 函数：

$(document).ready(function(){
 $('.ajaxClick').click(function(event){
    //event.preventDefault();
    $.ajax(
       type: 'GET',
       url: 'theRoute',
       datatype: 'json',
    success: function(data){
       console.log('AJAX loaded something');
    }, 
    error: function(){
       console.log('AJAX load did not work');
    }
    });
 });
});

查看逻辑：

<a class="ajaxClick" data-name="{{ 
route('theRoute') }}" href="#">Testing Ajax</a>

在 a 标记中，我有最初可以工作但会刷新页面并且不刷新就无法加载的路线。

流程是这样的，点击导航栏中的链接，在设置字段中动态加载 Laravel 路由，该字段分配给视图以使用 @yield('somecontent') 加载。

另外一个问题是，你将如何在 Laravel 中实现它？如果还需要什么意见。

谢谢！

附言仪表板的这个example 几乎就是我想要做的，如何在不刷新页面的情况下立即加载内容。

【问题讨论】：

您的浏览器控制台说什么？还要检查 Network 选项卡。仅供参考，它是dataType，而不是datatype（大小写很重要）。此外，错误回调具有传递给它的信息，您可以使用这些信息。例如~error: (jqXhr, status, error) => { console.error(status, error) }
另一个问题，您的响应必须是 JSON。否则会失败。
@itachi 实际上，datatype 不正确，没关系????
是的。同意。现在应该没关系。

标签： jquery ajax laravel laravel-5

【解决方案1】：

如果你仍然想使用 jQuery，你可以使用这样的东西：

$(document).ready(function(){
    $('.ajaxClick').click(function(event){
        //event.preventDefault();
        $.ajax({
            type: 'GET',
            url: 'theRoute',
            datatype: 'json',
            success: function(data){
                $('#main-wrapper').html(data);
            }, 
            error: function(){
                console.log('AJAX load did not work');
            }
        });
    });
});

我建议你尝试学习 javascript 框架。您发送的链接是使用 Angular JS，并且您需要的功能内置在其中，称为 SPA 或单页应用程序

JS框架不完整列表：

角度
反应
Vue

【讨论】：