项目场景:

ajax 请求数据库中的数据,展示在页面

问题描述:

Ajax调用数据库中的数据成功,但是没有渲染到页面
出现的问题如图所示

function loadBookList() {
            // 1.调用后台的接口  获取后台的数据
            $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                //  2.把获取的数据渲染到页面
                //判断一下数据  status
                if (status === 200) {
                    let Tag = ''
                    //循环遍历数据   动态拼接数据到HTML标签中
                    res.data.forEach(item => {
                        //给标签添加自定义属性
                        Tag += `<tr>
                                <th>${item.id}</th>
                                <th>${item.bookname}</th>
                                <th>${item.author}</th>
                                <th>${item.publisher}</th>
                                <th ><a href="#" class='del' data-id='${item.id}'>删除</a></th>
                               </tr>`
                    });
                    //重新渲染到页面
                    $('#tb').html(Tag)
                }


            })
        }
        //调用函数
        loadBookList()

原因分析:

调用后台的接口提示成功,但是没有在页面显示出来,就是前端的代码问题,是渲染到页面出现的问题,渲染到页面的时候没有使用回调函数的形参

解决方案:

更多推荐

ajax 请求数据库中的数据,展示在页面(查询数据)