ajax 异步传输数据例子

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

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

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

 

 

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

---- >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()