ajax 异步传输数据例子

页面加载后下拉列表显示数据

1 . 单个下拉列表显示数据

1 系统类型 :<select name="systemtype" id="systemtype" class="xla_sheng">
2             <option value="" selected style="width:260px;height:30px;">请选择</option>
3         </select>

 

 

1 $(function () {
2     //getjson(url,data,callback) 其中data可以没有值
3     $.getJSON('/admin/sysType/',function (regions) {
4         $.each(regions,function (key,values) {
5             //console.log(key,values)
6             $('#systemtype').append($('<option value=""></option>').attr('value',key).text(values))---> 给
7         })
8     })
9 });

---- >getJSON 中(url,data(字典),callback)
2. 二级联动效果,在页面上继续添加如下信息,三级联动和二级联动方法一样

    数据类型 :<select name="datatype" id="datatype" class="xla_sheng">
                <option value="" selected style="width:260px;height:30px;">请选择</option>
            </select>

$('#systemtype').change(function () {
       $('#datatype').empty() // 异步刷新时 如果不清空上一条记录留下的内容，会重复叠加
       $('#datatype').append($('<option value="">请选择</option>'))
       $.getJSON('/admin/typeData/',{val:$('#systemtype').val()},function (regions) {
               $.each(regions,function (key,values) {//回调函数以键值对形式存在
                   $('#datatype').append($('<option value=""></option>').attr('value',key).text(values))
               })
           });

 回调函数是由后台返回的, 类型是json.dumps()

转载于:https://www.cnblogs.com/lcmemo/p/6410139.html