Ajax 调用触发控制器功能

Question

我是 laravel 新手，对 AJAX 也没有太多经验。几天来我一直在努力解决一个问题，我希望有人能指出我正确的方向。

我在一个视图中使用 Chart.js 和 Google Maps API。一切都很好，所以没有问题。我在地图上绘制了一些标记并在 Chart.js 中加载了一个数据集。单击标记时，我想在 Chart.js 中加载新数据集。我正在尝试使用 AJAX 调用具有另一个数据集的控制器函数。没有返回错误，来自 AJAX 调用的控制台日志正在运行，但 MapController 中的函数没有被调用。

我尝试使用 Postman 在 /map 路线上进行 POST，这似乎工作正常。

视图中的 AJAX 调用

$.ajax({ 
            url: "/map",
            type: "POST",
            data: "",
            headers: {"X-CSRF-TOKEN": $("meta[name="csrf-token"]").attr("content")},
            success: console.log("AJAX END")
            });

路线

Route::post('/map', 'MapController@NewChart');

控制器功能

    public function NewChart()
{

    echo "<script>console.log('NewChart function called');</script>";

    $chart = new chart;
    $chart->labels(['Q1', 'Q2', 'Q3', 'Q4']);
    $chart->dataset('2019', 'line', [100, 10, 4, 10]);
    $chart->dataset('2018', 'line', [5, 5, 5, 5]);

    return view('map', ['chart' => $chart]);

}

NewChart 函数的控制台日志没有被触发，因此 AJAX 调用永远不会到达该函数。

我希望有人能告诉我我在这里做错了什么。

Answer 1

请尝试对您的 ajax 请求使用以下结构：

  $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
  $.ajax({
            url: "/map",
            type: 'POST',
            data: {},
            success: function (data) {    
                console.log("AJAX END");
            }
        });

也许您的调试 "<script>console.log('NewChart funtion called');</script>" 有问题，但一切正常。只需尝试使用返回的数据即可。

success: function (data) {    
                $('#someDiv').html(data);
            }