关于ajax请求后台获取下拉列表用的数据

一、效果展示

有时候需要在页面请求后台获取数据：这里就用到了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请求后台获取下拉列表用的数据相关推荐

ajax asp后台获取不到post数据,jQuery AJAX调用将数据发布到ASP.Net页面(不是Get但POST)...
选项1.保持服务器端代码相同首先删除kendo.stringify.然后删除contentType或将其更改为- "application/x-www-form-urlencoded; c ...
ajax asp后台获取不到post数据,asp.net webapi [FromBody]string 获取不到ajax post的数据的解决方法...
原文:asp.net webapi [FromBody]string 获取不到ajax post的数据的解决方法 webapi中如下([FromBody]string jsonData: public ...
SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效
场景前端Vue的登录页面,验证码请求后台,后台生成验证码照片后使用Base64编码后, 返回给前端,前端进行显示. 注: 博客: https://blog.csdn.net/badao_liuman ...
ajax提交用流的方式,ajax 请求后台返回的文件流
download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...
js ajax获得对象怎么放到td上,jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中...
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
ajax获取数据添加到表格,Jquery通过AJAX从后台获取数据显示在表格上（复选）
代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...
vue使用ajax提交数据,vue使用ajax请求后台数据的方法
vue使用ajax请求后台数据的方法发布时间:2020-10-15 16:54:41 来源:亿速云阅读:108 作者:栢白这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值 ...
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...

关于ajax请求后台获取下拉列表用的数据

一、效果展示

二、步骤

关于ajax请求后台获取下拉列表用的数据相关推荐

最新文章

热门文章