0

我有以下用于选择输入的 ajax 代码：

$("#franchise").change(function() {
    //alert( $( "#franchise" ).val() );
    var f = $( "#franchise" ).val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $.ajax({
      type: 'POST',
      url  : "{{ route('ajax.series') }}",
      data : ({franchise : f}),
      dataType: 'JSON',
      success: function(response) {
        $("#series").html('');
        $("#series").append(response);
      }
    });
});

而且我还有以下路线：

Route::post('ajax/series', 'AjaxController@series')->name('ajax.series');

我在 AjaxController 中有以下代码：

public function series(Request $request)
{
    $id = $request->input('franchise');//I get the id data from select input
    $series = Serie::where('franchise_id',$id)->get();
    return view('ajax.series', ['series' => $series]);
}

但是当我做选择事件时，什么也没有发生。

我知道该change事件有效，因为我仅使用 an 检查它，alert因此问题可能出在 ajax 上。有什么问题？

4

4 回答 4

1 
$("#franchise").change(function() {
    //alert( $( "#franchise" ).val() );
    var f = $( "#franchise" ).val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $.ajax({
      type: 'POST',
      url  : 'ajax/series',
      data : ({franchise : f}),
      dataType: 'JSON',
      success: function(response) {
        $("#series").html('');
        $("#series").append(response);
      }
    });
});
于 2020-10-26T05:34:24.523 回答
0

您的控制器和路由代码非常好，但是您的 javaScript 代码在这里有一点问题，在 laravel 中，无需为 CSRF 令牌添加 ajax 标头字段，您可以添加 CSRF 令牌作为 ajax 的主体，就像您添加了特许经营权和代码绝对可以正常工作。

我已经编写了代码供您尝试。

    $('#franchise').change(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "{{ route('ajax.series') }}",
            data: {
                franchise: $(this).val(),
                _token: $('meta[name="csrf-token"]').attr('content'),
            },
            success: function(response) {
                $("#series").html('').append(response);
            }
        });
    });
于 2020-10-26T05:59:19.617 回答
0

@sandy 是对的，这肯定会解决您的问题，此外，您还可以在浏览器开发人员工具中检查您的 ajax 调用，以查看这些调用实际上是在访问控制器的方法。

对于 chrome，它的 Ctrl+Shift+I

点击查看图片

调试愉快！

于 2020-10-26T05:53:22.493 回答
0

只需将您的以下代码移动到文档就绪功能中

$.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
});

添加{{ csrf_field() }}您的通用布局文件

确保您的 js 代码在同一个文件中，而不是外部 js，然后使用下面的 js 代码

$("#franchise").change(function() {
    //alert( $( "#franchise" ).val() );
    var f = $( "#franchise" ).val();
    $.ajax({
      type: 'POST',
      url  : "{{ route('ajax.series') }}",
      data : ({franchise : f}),
      dataType: 'JSON',
      success: function(response) {
        $("#series").html('');
        $("#series").append(response);
      }
    });
});
于 2020-10-26T05:42:51.470 回答