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

最新推荐文章于 2021-08-05 20:14:27 发布

苦的人生遇见甜

最新推荐文章于 2021-08-05 20:14:27 发布

阅读量1w

点赞数 4

分类专栏： jQuery 文章标签： ajax empty() append()

本文链接：https://blog.csdn.net/wd2011063437/article/details/80662783

版权

本文展示了如何利用Ajax在页面加载后从后台获取数据，以填充下拉列表。详细步骤包括HTML中Ajax调用、后台控制器数据处理及前端数据绑定。重点介绍了empty()和append()方法的应用。

摘要由CSDN通过智能技术生成

一、效果展示

有时候需要在页面请求后台获取数据：这里就用到了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").em