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("数据加载出错,请重试!");
            }
    }

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM