一、效果展示

有時候需要在頁面請求后臺獲取數據：這里就用到了ajax去后臺獲取數據：

數據庫的數據是這樣的：

mysql> select * from ocenter_travel_class_info where pid = 0; +-----+-----+----------------+------------+ | id | pid | class_name | basic_code | +-----+-----+----------------+------------+ | 1 | 0 | 地文景觀 | A | | 2 | 0 | 水域風光 | B | | 3 | 0 | 生物景觀 | C | | 4 | 0 | 天象與氣候景觀 | D | | 5 | 0 | 遺址遺跡 | E | | 6 | 0 | 建筑與設施 | F | | 7 | 0 | 旅游商品 | G | | 8 | 0 | 人文活動 | H | | 198 | 0 | 自然景觀 | I | +-----+-----+----------------+------------+ 9 rows in set (0.00 sec)

二、步驟

　　1、首先在HTML頁面中使用$(function(){}); 在頁面加載完成后用ajax去后臺獲取數據：

<!-- ......省略部分代碼......--> <script type="text/javascript">$(function(){$.ajax({type:'post',url:"{:U('Tour/main_data')}",dataType:"json",data:{pid:0},success:function(data){// console.log(data);$("#main_id").empty();$("#main_id").append("<option value=''>請選擇主類</option>");for(var i=0;i<data.length;i++){$("#main_id").append('<option value='+data[i].id+'>'+data[i].class_name+'</option>');}}}); </script> <!-- ......省略部分代碼......--> <label class="col-sm-2 control-label"><font color="red">* </font>主類 名稱 </label> <div class="col-sm-4"><select name="main_id" id="main_id" class="text input-large form-control"><option value="">請選擇主類</option></select> </div> <!-- ......省略部分代碼......-->

　　2、后臺控制器的方法中去數據庫獲取數據：

//獲取后臺主類數據 public function main_data(){$class_id = I('pid');if($class_id == 0){$Travel = M('travel_class_info');$travel_list = $Travel->where('pid=0')->select();$this->ajaxReturn($travel_list);} }

　　3、打印方法中的json數據：

[{"id": "1","pid": "0","class_name": "地文景觀","basic_code": "A" }, {"id": "2","pid": "0","class_name": "水域風光","basic_code": "B" }, {"id": "3","pid": "0","class_name": "生物景觀","basic_code": "C" }, {"id": "4","pid": "0","class_name": "天象與氣候景觀","basic_code": "D" }, {"id": "5","pid": "0","class_name": "遺址遺跡","basic_code": "E" }, {"id": "6","pid": "0","class_name": "建筑與設施","basic_code": "F" }, {"id": "7","pid": "0","class_name": "旅游商品","basic_code": "G" }, {"id": "8","pid": "0","class_name": "人文活動","basic_code": "H" }, {"id": "198","pid": "0","class_name": "自然景觀","basic_code": "I" }]

　　4、總結
　　　　（1）、$(function(){}); 在頁面加載完成后進行操作。
　　　　（2）、$.ajax({}); 的使用，獲取到數據后寫的for循環
　　　　（3）、對empty()和append()的使用

總結

以上是生活随笔為你收集整理的关于ajax请求后台获取下拉列表用的数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。