我在 Laravel 7 中遇到 ajax 问题

Posted 2023-03-24

【中文标题】我在 Laravel 7 中遇到 ajax 问题

【英文标题】：I have problems with ajax in Laravel 7

【发布时间】：2021-02-08 09:31:30

【问题描述】：

我有以下用于选择输入的 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。有什么问题？

【参考方案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);
      
    );
);

【参考方案2】：

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

$.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);
      
    );
);

【参考方案3】：

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

对于 chrome，它的 Ctrl+Shift+I

Click to view Image

调试愉快！

【参考方案4】：

您的控制器和路由代码非常好，但是您的 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);
            
        );
    );