一、效果展示

有時(shí)候需要在頁(yè)面請(qǐng)求后臺(tái)獲取數(shù)據(jù)：這里就用到了ajax去后臺(tái)獲取數(shù)據(jù)：

數(shù)據(jù)庫(kù)的數(shù)據(jù)是這樣的：

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

二、步驟

　　1、首先在HTML頁(yè)面中使用$(function(){}); 在頁(yè)面加載完成后用ajax去后臺(tái)獲取數(shù)據(jù)：

<!-- ......省略部分代碼......--> <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=''>請(qǐng)選擇主類</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="">請(qǐng)選擇主類</option></select> </div> <!-- ......省略部分代碼......-->

　　2、后臺(tái)控制器的方法中去數(shù)據(jù)庫(kù)獲取數(shù)據(jù)：

//獲取后臺(tái)主類數(shù)據(jù) 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數(shù)據(jù)：

[{"id": "1","pid": "0","class_name": "地文景觀","basic_code": "A" }, {"id": "2","pid": "0","class_name": "水域風(fēng)光","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": "建筑與設(shè)施","basic_code": "F" }, {"id": "7","pid": "0","class_name": "旅游商品","basic_code": "G" }, {"id": "8","pid": "0","class_name": "人文活動(dòng)","basic_code": "H" }, {"id": "198","pid": "0","class_name": "自然景觀","basic_code": "I" }]

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。