Ajax返回“未定义”值

我有一个从数据库动态填充的选择框。第二个字段填充 取决于用户在第一个框中选择的内容。我使用ajax实现了这一点

当我选择第一个选项时，第二个选项显示“未定义”项，而不是数据库中的实际数据

这是我的表格：

  <form class="form-inline" id="search-bar">

        <select class="form-control productcategory" id="product_cat_id">

           <option value="0" disabled="true" selected="true">Town</option>
           @foreach($estates as $estate)
             <option value="{{$estate->id}}">{{$estate->product_cat_name}
             </option>

           @endforeach
        </select>

        <select class="form-control productname">

           <option value="0" disabled="true" selected="true">Product Name</option>
        </select>

        <select class="form-control">
            <option value="0" disabled="true" selected="true">Size</option>
            <option value="Bedsitter">Bedsitter</option>
            <option value="One Bedroom">One Bedroom</option>
            <option value="Two Bedroom">Two Bedroom</option>
            <option value="Three Bedroom">Three Bedroom</option>
         </select>

        <button type="submit" class="btn btn-default">Search</button>
</form>

这是我的ajax代码：

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('change', '.productcategory', function(){
           //console.log("Shit is working");

           var new_id=$(this).val();
           //console.log(cat_id);
           var div=$(this).parent();

           var op=" ";

            $.ajax({
               type:'get',
               url:'{!!URL::to('findEstateName')!!}',
               data:{'id':new_id},
               success:function(data){
                    //console.log('success');
                    //console.log(data);
                    //console.log(data.length);
                     op+='<option value="0" selected disabled>chose product</option>';
                     for(var i=0;i<data.length;i++){
                     op+='<option value="'+data[i].id+'">'+data[i].productname+'</option>';
                     }
                    div.find('.productname').html(" ");
                    div.find('.productname').append(op);

                },
               error:function(){

               }
            });
        });
        $(document).on('change','.productname',function (){
          var prod_id=$(this).val();

          var a=$(this).parent();
          console.log(prod_id);
          var op="";
        });
    });
</script>

---

我不明白为什么项目不会在我的第二个框中填充，而只返回“未定义”。我可能缺少什么？

在代码中使用的属性名称似乎是Estate而不是productname。尝试将数据[i].productname更改为数据[i].Estate

所以这一行：

op+='<option value="'+data[i].id+'">'+data[i].productname+'</option>';

应该是：

op+='<option value="'+data[i].id+'">'+data[i].Estate+'</option>';

---

您是否尝试过将URL参数从'URL:'{！！URL:：更改为'findEstateName'！！}'，'更改为URL:{！！URL:：更改为'findEstateName'！！}，。单引号可能有问题，为了测试的目的，尝试硬编码完整的URL，如果它有效与否？我已经尝试过了，它不起作用..你调试过findEstateName函数了吗，它工作正常吗，你在变量$data中得到了什么值？console.logdata；返回数据库中的项，即应该替换“未定义项”的项，因此这意味着您的ajax工作正常。你能以精确的格式发布返回的json数据吗。无论它在控制台中打印什么，请粘贴到这里。

op+='<option value="'+data[i].id+'">'+data[i].Estate+'</option>';