ajax - Ajax POST 请求不起作用 - 在 laravel 刀片中的依赖下拉菜单中

Question

在这里，我有一个下拉菜单，例如 - countryName->CityName->ThanaName（ThanaName 取决于 CityName，CityName 取决于 countryName）

• 首先，我从数据库表中获取国家名称。
• 我通过 ajax 传递了国家名称，如下所示。

  $(document).on('change', '[name=country]', function() {
           var country = $(this).val();
           get_city(country);
       });

       function get_city(country) {
           $.ajax({
               headers: {
                   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
               },
               url: "{{route('get-city')}}",
               type: 'POST',
               data: {
                   country_name: country
               },
               success: function (response) {
                   var obj = JSON.parse(response);
                   if(obj != '') {
                       $('[name="city"]').html(obj);
                       AIZ.plugins.bootstrapSelect('refresh');
                   }
               }
           });
       }

而web.php中的路由就像Route::post('/get-city', 'CityController@get_city')->name('get-city');

而在 CityController 中， get_city 方法就像

      public function get_city(Request $request) {
        $country_info = Country::where('status',1)->where('name', $request->country_name)->first();
        
        $cities = City::where('country_id', $country_info->id)->get();
        $html = '';
        
        foreach ($cities as $row) {
//            $val = $row->id . ' | ' . $row->name;
            $html .= '<option value="' . $row->name . '">' . $row->getTranslation('name') . '</option>';
        }
        
        
        echo json_encode($html);
    }

这工作得很好，它根据国家名称返回城市名称。但问题在于依赖于 cityName 的thanaName。为此，我的路线就像Route::post('/get-thana', 'ThanaController@get_thana')->name('get-thana');

在 ThanaController 中，get_thana 方法就像

public function get_thana(Request $request) {
       
        $city_info = City::where('name', $request->city_name)->first();
        
        $thanas = Thana::where('city_id', $city_info->id)->get();
        
        $html = '';
        
        foreach ($thanas as $row) {
//            $val = $row->id . ' | ' . $row->name;
            $html .= '<option value="' . $row->name . '">' . $row->getTranslation('name') . '</option>';
        }
        
        
        echo json_encode($html);
    }

ajax代码就像

$(document).on('change', '[name=city]', function() {
            var city = $(this).val();
            console.log(city);
            console.log('Here');
            get_thana(city);
        });

        function get_thana(city) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('get-thana')}}",
                type: 'POST',
                data: {
                    city_name: city
                },
                success: function (response) {
                    var obj = JSON.parse(response);
                    if(obj != '') {
                        $('[name="thana"]').html(obj);
                        AIZ.plugins.bootstrapSelect('refresh');
                    }
                }
            });
        }

但它显示

POST http://localhost/rul/ecom/get-thana 500（内部服务器错误）

这是我的 ajax 完整代码。

    <script type="text/javascript">
        

        $(document).on('change', '[name=country]', function() {
            var country = $(this).val();
            console.log(country);
            console.log('country');
            get_city(country);
        });

        function get_city(country) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('get-city')}}",
                type: 'POST',
                data: {
                    country_name: country
                },
                success: function (response) {
                    var obj = JSON.parse(response);
                    if(obj != '') {
                        $('[name="city"]').html(obj);
                        AIZ.plugins.bootstrapSelect('refresh');
                    }
                }
            });
        }

//start another 
        $(document).on('change', '[name=city]', function() {
            var city = $(this).val();
            console.log(city);
            console.log('Here');
            get_thana(city);
        });

        function get_thana(city) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('get-thana')}}",
                type: 'POST',
                data: {
                    city_name: city
                },
                success: function (response) {
                    var obj = JSON.parse(response);
                    if(obj != '') {
                        $('[name="thana"]').html(obj);
                        AIZ.plugins.bootstrapSelect('refresh');
                    }
                }
            });
        }

        

    </script>

在浏览器网络选项卡中，当我更改城市时，错误显示如下图所示。 在此处输入图像描述

浏览器控制台选项卡：在此处输入图像描述

标签： ajaxlaraveldrop-down-menu