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) {
let arrBook = res.data
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>