带有 AJAX 文件的 Laravel 路由

Question

我是 Laravel 的新手，我正在尝试学习如何创建一个动态下拉框，其中第二个下拉框会根据第一个下拉框的选择而改变。

这是我的刀片文件中的表单代码：

{!! Form::open(array('url'=>'', 'files'=>true)) !!}
    <label>Select a Cinema:</label><br>
    <select id = "cinema" name = "cinema">
        @foreach ($cinemas as $cinema)
            <option value="{{$cinema->id}}">{{$cinema->name}}</option>
        @endforeach
    </select>
    <br>
    <label>Select a session:</label>
    <br>
    <select id = "sesh" name = "sesh">
        <option value=""></option>
    </select>
    <br>
    <label>Number of tickets:</label><br>
    <select id = "count" name ="count">
        @for ($i = 1; $i < 10; $i++)
            <option value="{{$i}}">{{$i}}</option>
        @endfor
    </select>
    <br><br>
    <input type="submit" value="Submit">
{!!Form::close()!!}

这是我的 AJAX 代码（也在刀片文件中，但在 <script> 标签中：

<script>
  $('#cinema').on('change', function(e){
    console.log(e)
    window.alert("On Change");
    var cinema_id = e.target.value;



  //ajax
  $.get('/ajax-subcat?cinema_id=' + cinema_id, function(data){
    //success data
    console.log(data);
    window.alert("On Success");
    $('#sesh').empty();
    $.each(data, function(index, subcatObj){
      $('#sesh').append('<option value=""' + subcatObj.id +'">'+subcatObj.name+'</option>');
    });
  });
  });

</script>

最后这是我的路线：

Route::get('/ajax-subcat', function(){
   $cinema_id = Input::get('cinema_id');
    $sessions = Session::where('cinema_id', '=', $cinema_id)->get();
    return Response::json($sessions);
});

所以这段代码没有生成任何数据，而是给我一个 404 错误。

我已经通过警报验证了 AJAX 代码确实进入了“更改”功能，但是它没有显示第二个警报。在我有限的理解中，我觉得我的路线文件可能有问题？就好像路由文件正在返回数据一样，AJAX 中的下一个函数应该正在运行。

我在路由代码中不明白的一件事是 Input::get('cinema_id') 正在做什么。我认为它正在抓取用户在下拉框中输入的内容？

Answer 1

由于它给出 404 错误，我希望使用完整的 url 可以解决这个问题。使用

//ajax
$.get('{{ url('/ajax-subcat') }}?cinema_id=' + cinema_id, function(data){
    //success data

Answer 2

在你的 ajax 调用中添加标题

headers : {
    'csrftoken' : '{{ csrf_token() }}'
}

Answer 3

似乎这里发生了一些事情。使用 Laravel 将服务器上发生的事情和使用 Javascript 的客户端上发生的事情分开是很重要的。

服务器
发送包含数据的表单。您使用的任何刀片语法都像这样。

@foreach ($cinemas as $cinema)
   <option value="{{$cinema->id}}">{{$cinema->name}}</option>
@endforeach

在发送到客户端之前在服务器上呈现。这就是加载页面时第一个下拉菜单填充数据的方式。

客户

看起来您使用 AJAX 根据从第一个下拉菜单中选择的用户发出请求。这一行：

$.get('/ajax-subcat?cinema_id=' + cinema_id, ...

将向您的Route::get('/ajax-subcat', ... 提出构建请求以及查询字符串。 ?cinema_id=1。 Input::get('cinema_id'); 应该取查询字符串的值 (1)。

看来您已经正确设置了路线，所以我认为这是var cinema_id = e.target.value; 的问题。我会在发出请求之前检查它的值，并确保它与您在服务器上的查询所需的值一致。

客户端上var cinema_id 的值将是服务器上$cinema_id 的值以供您查询。

希望对你有帮助，

马特

Answer 4

改变

uploadUrl: '{{route("product/create")}}',

到

uploadUrl: '{{url("product/create")}}',

并在 ajax 中添加它

headers: {
    'X-CSRF-Token':{{ csrf_token() }},
},