Laravel Backpack整合Ajax CRUD报错：Uncaught ReferenceError: $ is not defined

这个问题我之前也碰到过，核心原因要么是你的自定义脚本在jQuery加载前就执行了，要么是页面里重复加载jQuery导致冲突。结合你的代码，我给你几个具体的解决步骤：

1. 移除重复的jQuery引入 #

看你提供的库文件，你加载了两次不同版本的jQuery：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

重复加载jQuery会覆盖$对象，导致后续脚本无法识别。而且Laravel Backpack的backpack::layout模板本身已经自带了jQuery，你完全不需要自己再引入，直接删掉这两行就行。

2. 利用Backpack的布局区块管理脚本 #

Backpack的布局有专门的区块用来放置自定义脚本和样式，不要直接在页面里随意插入脚本。你需要把DataTables的初始化代码放到@section('after_scripts')里——这个区块会在页面底部加载，此时jQuery已经被Backpack的模板加载完成，$自然就能正常使用了。

同时，表格的HTML内容要放到@section('content')区块里，这是Backpack布局规定的内容展示区域。

修改后的完整代码示例 #

@extends('backpack::layout')

@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">Domains List</div>
        <div class="panel-body">
            <table id="domain_table" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Domain</th>
                        <th>Registrar</th>
                        <th>Login_ID</th>
                        <th>Password</th>
                        <th>New_Mobile</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>Email_Password</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@section('after_scripts')
    <!-- 如果Backpack没自带DataTables，就引入这两个文件 -->
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#domain_table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('ajaxdata.getdata') }}",
                "columns": [
                    { "data": "Domain" },
                    { "data": "Registrar" },
                    { "data": "Login_ID" },
                    { "data": "Password" },
                    { "data": "New_Mobile" },
                    { "data": "Mobile" },
                    { "data": "Email" },
                    { "data": "Email_Password" },
                    { "data": "action", orderable:false, searchable: false}
                ]
            });
        });
    </script>
@endsection

@section('after_styles')
    <!-- 引入DataTables的样式（如果Backpack没自带） -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
@endsection

额外说明 #

• 如果你不确定Backpack是否自带DataTables，可以先去掉引入的DataTables文件测试，报错的话再加上。
• 永远不要在Backpack的布局里随意添加全局的jQuery或Bootstrap引入，否则很容易出现版本冲突问题，用官方提供的after_styles和after_scripts区块是最稳妥的方式。

内容的提问来源于stack exchange，提问作者Calvin Tkh