通过 ajax onchange 事件将数据从 laravel 视图传递到控制器

Question

我在刀片视图中有一个下拉列表。 我想立即将所选项目的值发送到控制器。 我在 web.php 中有 2 条路线：

Route::get('/plots', 'PlotController@index'); 
Route::get('/plots/{testId}', 'PlotController@getData'); 

第一个填充下拉列表。 第二个应该将下拉列表的值发送到控制器，控制器从 mysql 中提取内容并将数据发送回绘制图表的视图。 我可以让下拉列表填充正常，但我不知道如何将选定的值发送到控制器。 我正在尝试使用 ajax 这样做：

$(document).ready(function() {

  $('#sel_test').change(function() {
    var testId = $(this).val();
    console.log("testId=" + testId);

    $.ajax({
      url: 'plots/' + testId,
      type: 'get',
      dataType: 'json',
      success: function(response) {
        console.log("success");
      }
    });
  });
});

testId 输出到控制台是正确的，但它永远不会到达控制器。 我在控制台中看到的错误是：

获取http://homestead.test/plots/1 500（内部服务器错误）

我对 laravel 很陌生，发现它非常令人困惑。 任何人都可以解释这样做的正确方法吗？

编辑：在测试并确认 Rian 的答案正确后，我尝试实现真正的代码，这当然要复杂得多。 而不是控制器返回输入 test_id：

return $request->test_id;

它实际上返回一个更复杂的结构：

return view('plot')
    ->with('measurements',json_encode($result))
    ->with('events',json_encode($timeline))
    ->with('limits',json_encode($limits));

当我取消注释原始控制器代码（包括上面的返回部分）时，似乎会影响控制器返回任何内容的能力。 这是 PlotController getData 方法的前几行：

public function getData(Request $request) {
    Log::debug("made it to PlotController.php@getData");
    Log::debug("test_id="+$request->testId);

这是日志输出：

[2020-02-23 16:43:52] laravel.DEBUG：到 PlotController.php@getData

第二行不输出任何内容。 这是我从下拉列表中选择一个项目后在 javascript 控制台中看到的内容：

testId=49 jquery.min.js:2 GET http://homestead.test/get-data-by-id?test_id=49 500（内部服务器错误）

有任何想法吗？

Answer 1

最简单的方法是在Laravel Request获取数据。 至少我是这样做的。

所以你的路线不应该包含任何参数。

您的路线将如下所示：

Route::get('get-data-by-id', 'PlotController@getData')->name('get.data.by.id');

你的ajax应该是这样的：

$(document).on('change', '#sel_test',function(){
    var testId = $(this).val();
    $.ajax({
        type:'GET',
        url:"{{ route('get.data.by.id') }}",
        data:{'test_id':testId},
        success:function(data){
            console.log(data);
        }
    });
});

在控制器的getData()函数中，只需使用Laravel Request来获取数据。

public function getData(Request $request)
{
    // You can return the ID to see if the ajax is working
    return $request->test_id;
}

Answer 2

让它更容易从 Get 发布

在 Web.php

Route::post('/list/plots', 'PlotController@getData')->name('getData'); 

在 Blade 文件 Ajax 请求中：

$(document).ready(function() {

 $('#sel_test').change(function() {
    var testId = $(this).val();
    var url = '{{ route("getData")}}';
    var token = "{{ csrf_token()}}";

   $.ajax({
     method:"post",
     url: url,
     data:{testId:testId,_token:token}
     dataType: 'json',
     success: function(response) {
       console.log("success",response);
     }
   });
 });

});

在控制器：

public function getData(Request $request){
  $testId = $request->testId;
  // Write your logic here
}

尝试这个。 希望对你有用