ajxa实例操作 - 技术栈

一、核心知识点总结

1、AJAX 异步请求

使用 $.ajax() 发起 HTTP GET 请求，从远程 API 获取图书数据。
dataType: "json" 表示期望服务器返回 JSON 格式的数据。

成功回调函数 success 接收响应数据 res，并进行处理。

html 复制代码

		<script>
			$.ajax({
				type: "GET",
				url: "http://......",
				dataType: "json",
				success: function(res) {
					console.log(res);
					console.log(res.data);
					console.log(res.data.rows);
				},
				error: function(res) {}
			});
		</script>

2、JSON 数据结构解析

响应数据结构为：

html 复制代码

{
  code: 1,
  msg: "数据列表",
  data: {
    total: 603,
    rows: [ {...}, {...}, ... ] // 图书数组
  }
}

通过 res.data.rows 获取图书列表数组。

3、DOM 操作与动态内容生成

使用字符串拼接的方式动态构建 HTML 内容（booksHTML 变量）。

利用 jQuery 的 .html() 方法将生成的 HTML 插入到指定容器 #books-container 中。

html 复制代码

	var booksHTML = ''; //存放图书信息的区域
	const books = res.data.rows;
//通过for循环为每一本图书增加div盒子来存放，并设置同一样式
	for (var i = 0; i < 20; i++) { 
	if (i % 5 === 0) {
	if (i > 0) booksHTML += '</div>';
	booksHTML += '<div style="display: flex; flex-wrap: wrap; margin-bottom: 20px;">';
	}

		booksHTML += `
		<div style="width: 15%; padding: 5px; text-align: center;">
		<img src="http://api.zhaomengjin.top${books[i].cover_image}" alt=""
					style="width: 150px; height: 120px;">
		<h4>${books[i].title}</h4>
		<p>${books[i].author}</p>
			</div>
	`;}
	if (i > 0) {
		booksHTML += '</div>';
		}

     //将图书信息插入到页面中
	$("#books-container").html(booksHTML);

4、CSS Flex 布局实现响应式展示

外层 <div> 使用 display: flex; flex-wrap: wrap; 实现自动换行。
每本书的卡片宽度设为 width: 15%，确保一行最多显示约 6 本（实际因 padding 和浏览器计算可能为 5~6 本）。
图片固定尺寸（150×120px），保持视觉统一。

5、循环与分组逻辑

使用 for (var i = 0; i < 20; i++) 遍历前 20 本书（对应第一页数据）。
每 5 本书包裹在一个 flex 容器中（if (i % 5 === 0)），便于控制行间距（margin-bottom: 20px）。

注：该逻辑存在一定瑕疵------若总数不是 5 的倍数，最后一行可能未闭合，但因固定取 20 本（正好 4 行），在此场景下可行。

6. 图片路径拼接

封面图路径为相对路径（如 /uploads/...jpg），需拼接域名：

html 复制代码

"http://api.zhaomengjin.top" + books[i].cover_image

二、开发思路梳理

1. 目标明确

从后端 API 获取图书数据，并在前端以"卡片网格"形式展示封面、书名、作者。

2. 数据获取 → 数据处理 → 视图渲染

获取：通过 AJAX 请求接口。
处理：提取 rows 数组，遍历每项。
渲染：拼接 HTML 字符串，一次性插入 DOM，避免频繁操作提升性能。

3. 布局设计考虑用户体验

使用 Flex 布局实现自适应换行。
固定图片尺寸保证排版整齐。
每行分组添加底部间距，增强可读性。

4. 代码结构清晰

分离数据逻辑与展示逻辑。
使用模板字符串（${}）提高可读性。
错误处理虽为空，但保留了 error 回调，具备基础健壮性。