jQuery封装Ajax实现数据页面渲染

TreeShaking

已于 2023-03-07 14:01:21 修改

阅读量251

点赞数

分类专栏： Ajax 文章标签： ajax jquery javascript

于 2023-03-03 10:41:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62643012/article/details/129315331

版权

Ajax 专栏收录该内容

4 篇文章

订阅专栏

jQuery封装Ajax实现数据页面渲染

技术实现

点击button按钮，将json数据渲染到ul中
success: function (res) 中的res，直接返回将json 字符串处理后的对象

<body>
    <div class="box">
        <h2>书籍页面jquery封装ajax练习</h2>
        <ul>
            <!-- <li>
                <p>书名:HHX</p>
                <p>作者额威威热热热</p>
            </li> -->
        </ul>
        <button>点击刷新书籍</button>

    </div>


    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        // 点击刷新
        $('button').on('click', function () {
            $.ajax({
                type: 'post',
                url: '././data/book.json',
                success: function (res) {
                    // 封装ajax 直接实现 json 字符串到 js对象的转换
                    let arrBook = res.data
                    // 设置空字符串，填充内容，随后追加到ul
                    let str = ''
                    for (let i = 0; i < arrBook.length; i++) {
                        str += `
                            <li>
                                <p>书名:${arrBook[i].name}</p>
                                <p>作者:${arrBook[i].author}</p>
                                <p>介绍:${arrBook[i].desc}</p>
                            </li>
                            `
                    }
                    $('ul').html(str)
                }
            })
        })
    </script>
</body>