ajax 解析json数据 详细实现过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>ajax 解析json数据</h2>
<h2>今典明珠作品推荐</h2>
<button>点击解析数据</button>
<!-- <link rel="stylesheet" href="./data/"> -->
<ul>
<!-- <li>
<p>书名：霍乱时期的爱情</p >
<p>作者：马尔克斯</p >
</li> -->
</ul>
<script>
// 实现效果：点击button ，发送ajax请求到 后台，处理处理后渲染到页面
const ul = document.querySelector('ul')
document.querySelector('button').onclick = function(){
// 1. 创建对象
let xhr = new XMLHttpRequest();
// 2.打开
xhr.open('post','./data/','true')
// 3.发送请求
xhr.send()
// 4.监听与处理
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
// 开始处理真正的数据
// 过程： 返回数据，将串转换为js对象，渲染到页面
let str = xhr.response;
// (str);
// 将json 串 转换为 js对象
let obj = JSON.parse(str)
// (obj);
//拿到js对象里边的data 数组
let dataArr = obj.data
// (dataArr);
// 将数组里边的 对象渲染到ul中,(创建li，追加到ul)
// 渲染效果1
// for(let i = 0;i<;i++){
// let lis= ('li')
// = `
// <p>书名：${dataArr[i].name}</p >
// <p>作者：${dataArr[i].author}</p >
// <p>描述：${dataArr[i].desc}</p >
// `
// (lis)
// 渲染效果2
let strli = ''
for(let i = 0;i<dataArr.length;i++){
strli += `<li>
<p>书名：${dataArr[i].name}</p >
<p>作者：${dataArr[i].author}</p >
<p>描述：${dataArr[i].desc}</p >
</li>
`
console.log(strli);
}
ul.innerHTML = strli
}
}
}
</script>
</body>
</html>