我在Laravel 7中遇到Ajax问题

问题描述

对于选择输入，我具有以下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事件有效，因为我仅使用alert进行了检查，因此问题可能出在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  : 'ajax/series',data : ({franchise : f}),dataType: 'JSON',success: function(response) {
        $("#series").html('');
        $("#series").append(response);
      }
    });
});

,

只需在文档就绪功能中移动下面的代码

$.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') }}",success: function(response) {
        $("#series").html('');
        $("#series").append(response);
      }
    });
});

,

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

对于Chrome，其Ctrl + Shift + I

Click to view Image

调试愉快！

,

您的控制器和路由代码都很好，但是您的javaScript代码在这里有一个小问题，在laravel中，无需为CSRF令牌添加ajax标头字段，您可以像添加了CSRF令牌一样将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);
            }
        });
    });