本题要求使用HBuilderX结合提供的数据，创作一个展示图书商品的网页。根据附件中给出的数据，可以编写以下代码实现这个功能。 首先，创建一个index.html文件作为网页的入口文件。在这个文件中，需要引入css和js文件，也需要设置网页的基本结构。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图书商品展示</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>图书商品展示</h1> <div class="book-container"></div> <script src="main.js"></script> </body> </html> ``` 接下来，创建styles.css文件，设置一些基本的样式。 ```css h1 { text-align: center; } .book-container { display: flex; flex-wrap: wrap; justify-content: center; } .book { width: 200px; margin: 10px; padding: 10px; border: 1px solid #ccc; } .book img { width: 100%; } .book h2 { margin-top: 10px; font-size: 16px; text-align: center; } .book p { margin-top: 5px; text-align: center; } ``` 创建main.js文件，通过Ajax请求获取图书信息，并动态生成网页内容。 ```javascript window.onload = function() { var bookContainer = document.querySelector('.book-container'); // 发送Ajax请求，获取图书信息 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var books = JSON.parse(xhr.responseText); // 将获取到的JSON数据转换为JavaScript对象 renderBooks(books); // 动态生成图书内容 } }; xhr.open('GET', 'books.json', true); // 发送GET请求，获取books.json文件 xhr.send(); // 动态生成图书内容 function renderBooks(books) { for (var i = 0; i < books.length; i++) { var book = books[i]; // 创建书籍元素 var bookElement = document.createElement('div'); bookElement.className = 'book'; // 创建书籍图片元素 var imgElement = document.createElement('img'); imgElement.src = `imgs/${book.image}`; // 创建书籍元素 var titleElement = document.createElement('h2'); titleElement.textContent = book.title; // 创建书籍作者元素 var authorElement = document.createElement('p'); authorElement.textContent = '作者：' + book.author; // 将元素添加到书籍容器中 bookElement.appendChild(imgElement); bookElement.appendChild(titleElement); bookElement.appendChild(authorElement); bookContainer.appendChild(bookElement); } } }; ``` 在本地环境下运行这个网页，将会从books.json文件中获取图书信息，并根据数据动态生成网页内容。 注意，这里假设books.json文件和imgs文件夹与index.html文件在同一目录下。如果不在同一目录下，请相应地调整文件的路径。还需要在服务器环境下运行这个网页，否则可能无法发送Ajax请求。 [2024-06-24 04:34:51 | AI写代码神器 | 1970点数解答]