如何在 Codeigniter 中选择（下拉选项值）时使用 ajax 从 API 获取数据？

Question

I have a case in my code, the result does not appear or work, the city form select is still blank. Here is the 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>

This the javascript to get data from the controller:

$('#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'));
          }
        }
      });
    }

and this the controller to get data from 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);  
}

Answer 1

Your function does't return anything to ajax you need to 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
    }

Answer 2

You dont need json_decode(), just print $json_data. Because, it's already returns as string by 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;


}

Convert returned data to JSON object. And then use it:

   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'));
      }
    }

Answer 3

Having echo $json_data; ,now try to put error callback in your Ajax so that you will see the error response of your request. From there you will have an idea what went wrong within the process.

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