如何從Ajax Request獲取返回的值並將其分配給元素？

我需要一點幫助。我正在創建一個動態下拉列表，但我不知道如何在元素中顯示ajax結果。如何從Ajax Request獲取返回的值並將其分配給元素？

這裏是我的情況：

的用戶會選擇在下拉列表中的狀態。
選擇代碼將發送一個Ajax請求
後發送後，在選擇選項顯示的結果命名爲「城市」

所以有2個選擇框。一個是'國家'，另一個是'城市'。這裏是我的代碼：

這是我訪問控制器的jQuery

$('#state').on('change',function(){ 

    var state_code = $('#state').val(); 

    var city_url = '<?php echo site_url("locations/displayCity/' + state_code + '"); ?>'; 

    $.ajax({ 

     type: 'POST', 
     url: city_url, 
     data: '', 
     dataType: 'json', 
     success: function(){ 
      // 
     } 

    }); 

});

這裏是我的模型

public function getCity($code){ 

    $sql = "SELECT id,name FROM ref_cities WHERE province_code = '".$code."'"; 
    $result = $this->db->query($sql); 

    return json_encode($result->result_array()); 

}

這裏的功能是控制器部分

public function displayCity($code){ 

    $x = json_decode($this->locations_model->getCity($code)); 

    return print_r($x); 

}

下面的代碼在我選擇的城市代碼

<select id="state" name="state"> 
    <option value="">---Select State---</option> 
    <?php 

     $decode_city = json_decode($city,true); 

     foreach($decode_city as $m){ 
      echo "<option value='".$m['code']."' ".set_select('state',$m['code']).">".$m['name']."</option>"; 
     } 

    ?> 
</select>

這是我應該在哪裏把AJAX結果

<select id="city" name="city"> 
    <option value="">---Select City---</option> 
    <!-- INCLUDE LOOP TO DISPLAY cities --> 
</select>

來源

2013-11-27 Jerielle

試試這個部分，

jQuery.ajax({ 

     type: 'POST', 
     url: city_url, 
     data: '', 
     dataType: 'json', 
     success: function(data){ 
      //you will get the result in data 
      //jQuery("#someDiv").html(data); 
      //The parsed data is something like below 
      jQuery.each(jQuery.parseJSON(data), function(key,value){ 
      jQuery("#city").append('<option value ="'+value+'">'+value+'</option>'); 
      }); 
     } 


    });

希望它得到固定。

來源

2013-11-27 05:06:20

好的我會盡力感謝 – Jerielle

這是行不通的。 :( – Jerielle

在你的代碼，而不是someDiv –

做這樣的事情

$('#state').on('change',function(){ 

      var state_code = $('#state').val(); 

      var city_url = 'controller_file.php?state_code=<?php echo state_code; ?>'; 

      $.ajax({ 

       type: 'GET', 
       url: city_url, 
       data: '', 
       dataType: 'json', 
       success: function (response) { 
       var response_arr = JSON.parse(response); 

        $.each(response_arr ,function(index,value) 
        { 
        $("#city").append("<option value="+value.id+">"+value.name+"</option>"); 
}); 
       } 

      }); 

     });

在controller_file.php文件寫這

displayCity($_GET['state_code']);

來源

2013-11-27 05:11:27

好，謝謝。外貌正確，我會試試看:) – Jerielle

等待！我忘了你使用了json_encoded響應。我做了一個小改動，現在它會做..對不起，前面的回覆。：/ –

先生如果我在參數（響應）函數，它不顯示ajax結果 – Jerielle

$('#state').on('change',function(){ 
var cityList = ''; 
    var state_code = $('#state').val(); 

    var city_url = '<?php echo site_url("locations/displayCity/' + state_code + '"); ?>'; 

    $.ajax({ 

     type: 'POST', 
     url: city_url, 
     data: '', 
     dataType: 'String', 
     success: function(data){ 

        $('#city').html(data); 
     } 

    }); 

});

你可以重寫你這樣的代碼。它會工作

，或者你可以試試這個

public function getCity($code){ 

    $sql = "SELECT id,name FROM ref_cities WHERE province_code = '".$code."'"; 
    $result = $this->db->query($sql); 
    $cities = $result->result_array(); 
    $options = ''; 
    foreach($cities as $city){ 
    $options .= '<option value="'.$city["id"].'">'.$city["name"].'</option>'; 
    } 
    return $options; 

}

這應該試試這個

來源

2013-11-27 05:14:00

好吧，我也試過。但它不起作用。如果我在函數中的'data'中包含一個參數。它不顯示ajax結果。 – Jerielle

在「data」數組中，您將獲得您的值。現在檢查哪些形式的數據。 –

您可以使用控制檯您的數據值「console.log（data）」 –

你的成功的功能必須是這樣的

$.each($.parseJSON(data), function(key,value){ 
    $('<option/>','{value:'+value+'}').appendTo('#yourparent'); 
});

來源

2013-11-27 05:16:23

我設法回答我的問題。這是我做的

在我的控制器中，我刪除了json_decode（）。現在我有這個

public function displayCity($code){ 
    $x = $this->locations_model->getCity($code); 
    echo $x; 
}

然後我可以在控制檯中訪問它。

$.ajax({ 

    type: 'POST', 
    url: city_url, 
    data: '', 
    dataType: 'json', 
    async: false, 
    success: function(i){ 
     console.log(i); 
    } 

});

來源

2013-11-27 06:43:34 Jerielle

堅果我的另一個問題是如何追加選擇框選項中的值？ – Jerielle

如何從Ajax Request獲取返回的值並將其分配給元素？

回答

相關問題