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

相關文章
相關標籤/搜索