Ajax 在 Laravel 8 中返回 404 错误但路由存在答案

【问题标题】：Ajax returns 404 error in Laravel 8 but the route existsAjax 在 Laravel 8 中返回 404 错误但路由存在
【发布时间】：2021-12-16 00:28:37
【问题描述】：

我正在我的表单中实现 JQuery Select2()。当我尝试搜索时，我的 ajax 总是返回 404 错误。但是路由存在于web.php文件中。

这是我的代码：

Web.php

Route::get('/searchByName/{var1}', [App\Http\Controllers\AppointmentsController::class, 'searchByName'])->name('searchByName');

JS 文件

$(document).ready(function() {

    url = $(".js-example-basic-single").attr('data-url');
    $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    $(".js-example-basic-single").select2({
        dropdownParent: $('.name-search-box'),
        language: {
            inputTooShort: function () {return "Plase enter minimum 3 caracteres";},
            minimumInputLength: function () {return "Plase enter minimum 3 caracteres";},
            noResults: function () {return "no results";}
        },
        minimumInputLength: 3,
        placeholder: "Select a patient",
        allowClear: true,
        width: "100%",
        debug: true,
        ajax: {
            type: "GET",
            url: "/searchByName",
            delay: 500,
            dataType: 'json',
            data: function (params) {
            var query = {
                search: params.term
            }

            // Query parameters will be ?search=[term]&type=public
            return query;
            },
            processResults: function (resp) { console.log('response' + resp);
                return {
                    results: resp
                }
            },
            cache: true
        }

    });

}

AppointmentsController.php

public function searchByName($var1){
    
        $key = $request->get('search');
        $name = DB::table('patients_tbl')->select('id', 'first_name', 'middle_name', 'last_name')
                ->where('first_name', 'LIKE', "%$key%")->get()->toArray();
        
        return $name;
    
}

我试过带参数和不带参数的路由，清除了所有类型的缓存，包括路由缓存等，但没有用。

【问题讨论】：

你的 url 是 url:"/searchByName"，但是你的路由是 '/searchByName/{var1}' 你需要把你的 url 添加到变量中。

标签： jquery laravel routes jquery-select2

【解决方案1】：

我通过将方法从 GET 更改为 POST 并在 ajax 函数中添加带有参数的 _token 解决了这个问题。这是我更正的代码

JS 文件

$(document).ready(function() {

    //var uri = "{{ route('searchByName', ':variable') }}";
    //uri = uri.replace(':variable', var1);
    //alert(uri);
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    $(".js-example-basic-single").select2({
        dropdownParent: $('.name-search-box'),
        language: {
            inputTooShort: function () {return "Plase enter minimum 3 caracteres";},
            //minimumInputLength: function () {return "Plase enter minimum 3 caracteres";},
            noResults: function () {return "no results";}
        },
        minimumInputLength: 1,
        placeholder: "Select a patient",
        allowClear: true,
        width: "100%",
        debug: true,
        ajax: {
            type: "POST",
            url: '/searchByName',
            delay: 500,
            dataType: 'json',
            data: function (params) {
            return {
                _token: CSRF_TOKEN,
                search: params.term // search term
                };
            },
            processResults: function (data) { console.log(data);
                return {
                    results: $.map(data, function(obj) {
                        return { id: obj.id, text: obj.first_name };
                    })
                };
            },
            cache: true
        }

    });

});

和web.php

Route::post('/searchByName', [App\Http\Controllers\AppointmentsController::class, 'searchByName'])->name('searchByName');

【讨论】：

【解决方案2】：

你的 ajax 文件中的路由没有提供参数。在 url: "/searchByName" 但在路由中它有一个参数为 {var1}

ajax: {
   type: "GET",
   url: "/searchByName",
   delay: 500,
   dataType: 'json',
   data: function (params) {
   var query = {
       search: params.term
}

试试这个代码一次：

var uri = "{{ route('searchByName', ':variable') }}";
uri = uri.replace(':variable', var1);
$.ajax({
   url: uri,
   type: 'get',
   dataType: 'json',
   success: function(response) {
        console.log(response);
   });

【讨论】：

【解决方案3】：

也许你的 js 是 fetch url 之类的

localhost/searchByName?search=abc

但是php中的路由是定义的

localhost/searchByName/abc

不一样。

【讨论】：