html如何实现点击加载更多_html分页加载简单方案-html教程-PHP中文网

后端应返回结构化JSON数据，如{"items":[...],"has_more":true,"next_offset":20}，而非HTML片段，以保障SEO、安全与语义；前端用insertAdjacentHTML等原生方法追加DOM。

html如何实现点击加载更多_html分页加载简单方案

点击加载更多时后端该返回什么数据

后端接口不能返回完整 HTML 片段（比如带 <div>...</div> 的字符串），而应返回结构化数据，通常是 JSON。前端拿到后自己拼 DOM 或用模板渲染。否则容易破坏页面语义、影响 SEO、增加 XSS 风险。

推荐返回格式示例：

{
  "items": [
    {"id": 101, "title": "文章标题一", "excerpt": "摘要内容..."},
    {"id": 102, "title": "文章标题二", "excerpt": "摘要内容..."}
  ],
  "has_more": true,
  "next_offset": 20
}

items 是本次要插入的新条目数组，字段与首屏保持一致
has_more 控制“加载更多”按钮是否继续显示
next_offset 或 next_page 用于下一次请求的分页参数，避免前端靠 current_page + 1 硬算（防跳页、防重复）

前端用 `fetch` 请求 + `insertAdjacentHTML` 追加最轻量

不依赖框架时，直接用原生 JS 实现最可控。关键不是“怎么发请求”，而是“怎么把新内容塞进老容器里且不闪、不重绘整页”。

用 insertAdjacentHTML('beforeend', htmlString) 替代 innerHTML += ...，避免重新解析已有 DOM
每次请求前禁用按钮，响应后恢复，防止连点触发多次请求
建议给容器加一个 loading 状态类（如 is-loading），配合 CSS 显示骨架或禁用样式
错误时要显式提示，并保留按钮可点击，别让页面“卡死”

简短示例：

async function loadMore() {
  const btn = document.querySelector('#load-more');
  const container = document.querySelector('#list-container');
  
  btn.disabled = true;
  btn.textContent = '加载中...';

  try {
    const res = await fetch(`/api/posts?offset=${offset}`);
    const data = await res.json();
    
    data.items.forEach(item => {
      const el = document.createElement('article');
      el.innerHTML = `<h3>${item.title}</h3><p>${item.excerpt}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="overflowclass">Wechat Article Html</a>
													<p class="overflowclass">将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>`;
      container.appendChild(el);
    });

    if (data.has_more) {
      offset = data.next_offset;
    } else {
      btn.remove(); // 或 btn.style.display = 'none'
    }
  } catch (err) {
    alert('加载失败，请重试');
  } finally {
    btn.disabled = false;
    btn.textContent = '加载更多';
  }
}