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

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

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

第一个填充下拉列表。第二个是将下拉列表的值发送给控制器，控制器从mysql中提取数据并将数据发送回视图，视图绘制图表。我可以让下拉列表填充ok，但我不知道如何将所选值发送到控制器。我正在尝试使用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");
      }
    });
  });
});

$(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);
        }
    });
});

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

获取500（内部服务器错误）

我对拉拉维尔还很陌生，觉得它非常令人困惑。有人能解释一下正确的方法吗

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

return $request->test_id;

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

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

当我取消注释原始控制器代码（包括上面的return部分）时，它似乎会影响控制器返回任何内容的能力。以下是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:成功 绘图仪控制器。php@getData

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

testId=49 jquery.min.js:2 GET 500（内部服务器 （错误）

---

有什么想法吗？

最简单的方法是在

Laravel请求中获取数据。至少我是这样做的

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

您的路线如下所示：

$(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");
      }
    });
  });
});

$(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);
        }
    });
});

Route:：get（'get-data-by-id'，'PlotController@getData'）->name（'get.data.by.id'）

您的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");
      }
    });
  });
});

$(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;
}

从Get开始发布，以使其更简单

在Web.php

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

应刀片文件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);
     }
   });
 });

}))

At控制器：

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

试试这个。希望能为您工作
您能在代码中附加html部分吗？另外，您所处的链接.Status 500是一个通用的服务器错误响应。你必须看一下拉威尔的日志，看看威奇是个例外，谢谢你，瑞安和瑞彭！我昨天花了一整天的时间想找出正确的组合，你们几分钟就搞定了！我选择这个作为答案只是因为它稍微短一点，这总是好的。我测试了它，它工作了！