php，Laravel 7 - 無法從 AJAX 請求接收數據

Question

我還是個新手，目前正在學習如何使用 Laravel 7。

我的問題是，我試圖通過在我的子頁面上使用 AJAX 請求從控制器傳遞我的數據。 我注意到當我嘗試從我的子頁面傳遞數據時，該頁面不會收到它，但不知何故它正在母版頁上工作（我沒有使用任何 Blade 指令）。 我試圖 dd() 控制器中的數據，它確實顯示有數據。 但它不會將它傳遞給子頁面。 我推送的所有 JS 文件和自定義腳本都出現在子頁面上。

刀刃

code

index.blade.php（子頁面）

@extends('layouts.app')

@section('content')

<div class="container">
<div class="container mt-5">
        <h2 class="mb-4">Laravel 7 Yajra Datatables Example</h2>
        <table class="table table-bordered yajra-datatable">
            <thead>
                <tr>
                    <th class="text-center">#</th>
                    <th class="text-center">Name</th>
                    <th class="text-center">Batch</th>
                    <th class="text-center">Graduation Year</th>
                    <th class="text-center">Mobile</th>
                    <th class="text-center">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

@endsection

@push('child-scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    
    <script type="text/javascript">
        $(function () {
      
      var table = $('.yajra-datatable').DataTable({
          processing: true,
          serverSide: true,
          ajax: "{{ route('alumni-list') }}",
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'name', name: 'name'},
              {data: 'batch_year', name: 'batch_year'},
              {data: 'graduation_year', name: 'graduation_year'},
              {data: 'contact_no', name: 'contact_no'},
              {
                  data: 'action', 
                  name: 'action', 
                  orderable: true, 
                  searchable: true
              },
          ]
      });
      
    });
    </script>
    @endpush 

校友控制器.php

class AlumniController extends Controller
{
    public function index(Request $request)
    {
        // dd(Profile::latest()->get());
        if ($request->ajax()) {
            $data = Profile::latest()->get();
            return Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $btn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }
      
        return view('admin.users.index');
    }
}

校友路線

Route::get('alumni', [
        'uses' => 'AlumniController@index',
        'as' => 'alumni-list'
    ]);

謝謝你的時間，先生。

Answer 1

完成更多谷歌搜索后解決了它。

確保在 DataTable CDN 中添加 defer。

例子：

<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>

這是我找到答案的鏈接： https : //datatables.net/forums/discussion/50869/typeerror-datatable-is-not-a-function-datatable-laravel

有關為什么添加 defer 的更多理解： https : //www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Answer 2

使用 Yajra\\DataTables\\Contracts\\DataTable; 使用 Yajra\\DataTables\\Facades\\DataTables; 請在您的控制器中使用這兩行