← 返回 sofi 的题目列表Implement Button-Triggered Fetch with Lazy Loading in Vanilla JavaScript
类型：online_judge
Task: Implement Button-Triggered Fetch + Lazy Loading in Vanilla JavaScript (No Frameworks)
On a simple web page (you may build on the previous HTML structure), implement vanilla JavaScript logic so that clicking a button fetches data and appends results in a “lazy loading / load more” style.
Constraint: No frontend frameworks (React/Vue/Angular, etc.) and no third-party HTTP libraries (e.g., axios). Use native fetch.
API contract
Use the following endpoint:
GET https://jsonplaceholder.typicode.com/posts?_start={start}&_limit={limit}
Returns: a JSON array; each item includes:
userId (number)
id (number)
title (string)
body (string)
Requirements
The page has a “Load More” button.
No data is loaded initially; only start loading after the first button click.
On each click:
fetch the next page (using _start and _limit)
append the new items to the bottom (do not overwrite existing content)
Pagination:
limit = 10
first request start = 0
second request start = 10, etc.
UX details:
disable the button while the request is in flight and show loading text (e.g., change to Loading...)
on failure, show a visible error message and restore the button state
when the API returns an empty array, treat it as “no more data”: disable the button and show No more (or similar)
Constraints
Total data is at most 100 items (jsonplaceholder posts).
Submit
Complete HTML (+ optional CSS) + JS (inline or separate files).
No build tools required.
Example UI (styling not required)
a container <div id="results"></div> for rendered items
a button <button id="loadMore">Load More</button>
Example
Input
(click)
Output
First 10 posts appended; button re-enabled