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; 请在您的控制器中使用这两行