1. 程式人生 > 實用技巧 >js: 前端通過ajax方式獲取後臺資料填充下拉列表

js: 前端通過ajax方式獲取後臺資料填充下拉列表

由於後端使用drf開發,後端只處理資料不渲染前端模版,所以不能使用下面傳統的方式去展示後臺傳來的資料

期望實現的效果,在單擊【增加】按鈕時以ajax方式請求資料,並將資料填充到下拉列表

後臺返回的資料:[{"project_name":"專案1","project_id":1},{"project_name":"專案2","project_id":2}]

// 填充下拉列表
    function addData() {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 
'/getdata', success: function (data) { alert(JSON.stringify(data)) for (var i = 0; i < data.length; i++) { var jsonObj = data[i]; $("#project_id").append("<option value='" + jsonObj.project_id + "'>" + jsonObj.project_name + "</option>"); } }, error:
function (msg) { alert("資料加載出錯,請重試!"); } }