Ajax 相关下拉菜单未连接

我正在尝试用laravel和ajax制作一个相关的下拉菜单。我有两张桌子，地区和塔纳斯。地区可以有许多Thana。当我选择一个地区时，只有该地区下的thanas会显示，我正在尝试制作一些东西

 $data=Thana::select('name','id')->where('district_id',$request->id)->take(100)->get();
        return response()->json($data);//

这应该返回与请求的地区id匹配的thana名称和id，但由于某些原因，这失败了。但显示了正确的地区id

这是我的控制器代码

use Illuminate\Http\Request;
use App\District;
use App\Thana;
use App\Atm;
class AtmController extends Controller
{
   public function atmfunct(){
        $atmdistrict=District::all();
        $atmthana=Thana::all();//get data from table
        return view('MasterForms.atmlist',compact('atmthana','atmdistrict'));//sent data to view

    }

    public function findThanaName(Request $request){


        //if our chosen id and products table prod_cat_id col match the get first 100 data 

        //$request->id here is the id of our chosen option id
        $data=Thana::select('name','id')->where('district_id',$request->id)->take(100)->get();
        return response()->json($data);//then sent this data to ajax success
    }



}

这是我连接jquery请求的部分

<span>District: </span>
    <select style="width: 200px" class="districtt" id="district_id">

        <option value="0" disabled="true" selected="true">-Select-</option>
        @foreach($atmdistrict as $cat)
            <option value="{{$cat->id}}">{{$cat->name}}</option>
        @endforeach

    </select>

    <span>Thana Name: </span>
    <select style="width: 200px" class="name">

        <option value="0" disabled="true" selected="true">Thana Name</option>
        @foreach($atmthana as $cat)
            <option value="{{$cat->id}}">{{$cat->name}}</option>
        @endforeach
    </select>




</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

        $(document).on('change','.districtt',function(){
         console.log("hmm its change");

            var district_id=$(this).val();
             console.log(district_id);
            var div=$(this).parent();

            var op=" ";

            $.ajax({
                type:'get',
                url:'{!!URL::to('findThanaName')!!}',
                data:{'id':district_id},
                success:function(data){
                    console.log('success');

                    //console.log(data);

                    //console.log(data.length);
                    op+='<option value="0" selected disabled>chose division</option>';
                    for(var i=0;i<data.length;i++){
                    op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
                   }

                   div.find('.name').html(" ");
                   div.find('.name').append(op);
                },
                error:function(){
                        console.log('error');
                }
            });
        });

    });
</script>

地区：
-挑选-
@foreach（$atmdistrict作为$cat）
{{$cat->name}
@endforeach
Thana姓名：
塔纳名字
@foreach（$atmthana作为$cat）
{{$cat->name}
@endforeach
$（文档）.ready（函数（）{
$（文档）.on（'change'，'.districtt'，function（）{
log（“它的变化”）；
var district_id=$（this.val（）；
控制台日志（地区id）；
var div=$（this.parent（）；
var op=“”；
$.ajax({
类型：'get'，
url:“{！！url:：to（'findThanaName'）！！}”，
数据：{'id'：地区{u id}，
成功：功能（数据）{
console.log（'success'）；
//控制台日志（数据）；
//console.log（data.length）；
op+=‘选择除法’；
对于（var i=0；i，那么您认为您的代码的哪一部分失败了？请向我们提供有关以下方面的更多信息：

'{！！URL:：to（'findthanananame'）！！}'
看起来像什么
使用
地区id访问
时的原始JSON示例

向我们显示您的路由文件，其中包含
“{！！URL:：to（'findThanaName'）！！}”
我将根据您稍后提供的信息编辑我的答案。我还没有足够的声誉发表评论：p