如何在Codeigner中选择(下拉选项值)时使用ajax从API获取数据


How to get data from API with ajax on select (dropdown option value) in Codeigniter?

我的代码中有一个案例,结果不出现或不起作用,城市表单选择仍然为空。这是HTML:

<div class="form-group">
  <label>Province</label>
  <select class="form-control" name="province" id="province">
    <?php foreach($state_data->data as $sd){ ?>
    <option id="<?php echo $sd->code; ?>" value="<?php echo $sd->code; ?>" <?php echo (isset($this->session->userdata))?(($this->session->userdata('session_state_code') == $sd->code)?"selected":""):"";?>>
      <?php echo $sd->name ;?>
    </option>
    <?php } ?>
  </select>
</div>
<div class="form-group" id="city_section">
  <label>City</label>
  <select class="form-control" name="city" id="city">
    <?php foreach($city_data->data as $cd){ ?>
    <option value="<?php echo $cd->code; ?>" <?php echo (isset($this->session->userdata))?(($this->session->userdata('session_city_code') == $cd->code)?"selected":""):"";?>>
      <?php echo $cd->name ;?>
    </option>
    <?php } ?>
  </select>
</div>

这是从控制器获取数据的javascript:

$('#province').on('change', function() {
      var id = $(this).val();;
      $.ajax({
        type: "POST",
        dataType: 'json',
        url: "<?php echo base_url() ?>edit_profile/get_city",
        data: {
          id: $(this).val()
        },
        success: function(data) {
          $('select#city').html('');
          for (var i = 0; i < data.length; i++) {
            $("<option />").val(data[i].code)
              .text(data[i].name)
              .appendTo($('select#city'));
          }
        }
      });
    }

这是控制器从API获取数据:

public function get_city(){
  $m_url = URL_API;
  $function = "get_location";
  $i = $_REQUEST['id'];
  $url = $m_url . "/" . $function . "?" . "t=city" . "&" . "i=".$i;
  $json_data = file_get_contents($url);
  $data = json_decode($json_data);  
}

您的函数不会向ajax返回echo json_decode 所需的任何内容

public function get_city(){
        $m_url = URL_API;
        $function = "get_location";
        $i = $_REQUEST['id'];
        $url = $m_url . "/" . $function . "?" . "t=city" . "&" . "i=".$i;
        $json_data = file_get_contents($url);
        echo $data = json_decode($json_data);// use echo here
    }

您不需要json_decode(),只需打印$json_data即可。因为,它已经通过file_get_contents()以字符串形式返回。

public function get_city(){
    $m_url = URL_API;
    $function = "get_location";
    $i = $_REQUEST['id'];
    $url = $m_url . "/" . $function . "?" . "t=city" . "&" . "i=".$i;
    $json_data = file_get_contents($url);
    echo $json_data;

}

将返回的数据转换为JSON对象。然后使用它:

   success: function(data) {
      var jsonObj = JSON.parse(data);
      $('select#city').html('');
      for (var i = 0; i < jsonObj.length; i++) {
        $("<option />").val(jsonObj[i].code)
          .text(jsonObj[i].name)
          .appendTo($('select#city'));
      }
    }

有了echo $json_data;,现在尝试将error回调放在Ajax中,这样您就可以看到请求的错误响应。从那里你就会知道这个过程中出了什么问题。

error: function(err){
  console.log(err.responseText);
}