javascript - 在 php 的动态下拉列表中使用 ajax 时未找到

Question

在我的 php 代码中，我有两个下拉列表，另一个取决于第一个下拉列表。

这是第一个下拉列表:

<select class="form-control style" id="sel" >
    <option style="color: black;" >Select...</option>
    <?php foreach ($dtype as $row ) { ?>
    <option style"color:black;" value="<?php echo $row['donations_type_id'];?>"> <?php echo $row['donations_type_name'];?></option>
    <?php }?>                               
</select>  
<tr>
<td>Available Donation:</td>
<td style="color: black; ">
    <select name='avail' id='avail' class="form-control style" >
        <option style="color:black;" value="">Select...</option>                    
    </select>   
</td>
</tr>

第二个下拉列表显示与用户从第一个下拉列表中选择的内容相对应的数据。

这是脚本:

<script type="text/javascript">
$(document).ready(function(){
$("#sel").change(function(){  
    $.ajax({         
    data: {id: $(this).val()},  
    type: "POST",  
     url:"<?= base_url() ?>BeneficiaryModule/showAvailable/"+ $(this).val(),  
    success:function(data){  
    $("#avail").html(data);  
    }       
   });  
});
});
</script>

在我的 Controller 中:

public function showAvailable()
    {
    echo $id = $this->input->post('id', true);
    $data['package'] = $this->Beneficiary_model->getDtype($id);
    $output = null;
    foreach ($data['package'] as $row ) {
        $output.="<option value='".$row->package_id."'>".$row->package_name."</option>";
    }
    echo $output;        
}

在我的模型中:

public function getDtype($id){
    $this->db->select('package_id','package_name');
    $this->db->from('package_table');
    $this->db->where('package_type', $id);
    $query = $this->db->get();
    return $query->result();
}

当我尝试运行代码并通过 F12 对其进行调试时，它显示 POST http://localhost:8999/samp/sampModule/showAvailable/2 404 (Not Found)

为什么会这样？

谁能帮我解决这个错误吗？

Answer 1

$("#sel").change(function(){  
    $.ajax({         
        data: {id: $(this).val()}, 
...
        url:"<?= base_url() ?>BeneficiaryModule/showAvailable/"+ $(this).val(),

从ajax对象中取出$(this)。它现在指向 ajax 对象本身。尝试:

$("#sel").change(function(){  
    var _id = $(this).val();
    $.ajax({         
        data: {id: _id},
...
        url:"<?= base_url() ?>BeneficiaryModule/showAvailable/"+ _id,      

**UPDATED**

此外，如果从服务器正确接收数据但下拉列表仍未呈现，则问题可能出在 dataType 属性上。响应 mime 类型可能存在一些问题，导致智能猜测出现问题，数据被视为 json 或 xml 字符串，所以你可以尝试将其设置为显式:

$("#sel").change(function(){  
    var _id = $(this).val();
    $.ajax({         
        data: {id: _id},  
        type: "POST",  
        dataType: 'html',
        url:"<?= base_url() ?>BeneficiaryModule/showAvailable/"+ _id,  
        success:function(data){  
            $("#avail").html(data);  
        }       
    });

 });