如何使用 JS 或 jQuery 实现页面局部刷新？

使用JS或jQuery实现页面局部刷新的核心方法是利用AJAX技术，通过jQuery的.load()方法或原生JS的fetch/XMLHttpRequest动态更新特定DOM区域，避免全页面重载。 以下是具体实现方案：

jQuery的.load()方法是最简洁的局部刷新方案，适合从当前页面或异步URL加载内容到指定元素。

• 基础语法

  $(selector).load(URL + " selector");

  selector：目标容器（如.dl）

  URL：数据源地址（留空则加载当前页面）

  后接selector：从返回的HTML中提取特定部分

• 示例1：刷新当前页面的.dl区域

  $(".dl").load(location.href + " .dl");

  从当前URL重新获取HTML，但仅替换.dl元素的内容，其他区域保持不变。

• 示例2：异步加载其他页面内容

  $("#result").load("/api/data.html #content");

  从/api/data.html中提取#content部分，插入到当前页面的#result容器中。

• 优势

  代码简洁，无需手动处理DOM拼接。

  自动处理异步请求和响应。

若未引入jQuery，可通过fetch或XMLHttpRequest实现类似功能。

• 方案1：使用fetch API（现代浏览器）

  fetch(location.href) .then(response => response.text()) .then(html => { const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); const newContent = doc.querySelector(".dl").innerHTML; document.querySelector(".dl").innerHTML = newContent; });

  通过fetch获取当前页面HTML，解析后提取.dl内容并更新。

• 方案2：使用XMLHttpRequest（兼容旧浏览器）

  const xhr = new XMLHttpRequest();xhr.open("GET", location.href, true);xhr.onload = function() { if (xhr.status === 200) { const parser = new DOMParser(); const doc = parser.parseFromString(xhr.responseText, "text/html"); const newContent = doc.querySelector(".dl").innerHTML; document.querySelector(".dl").innerHTML = newContent; }};xhr.send();

  逻辑与fetch类似，但兼容性更广。

1. 性能优化

   局部刷新会发送HTTP请求，频繁操作可能影响性能。建议：

   添加防抖（debounce）或节流（throttle）。

   缓存已加载数据，避免重复请求。

2. 错误处理

   异步请求可能失败，需添加错误回调：$(".dl").load(location.href + " .dl", function(response, status, xhr) { if (status === "error") { console.error("局部刷新失败:", xhr.statusText); }});

3. SEO友好性

   动态加载的内容可能不被搜索引擎抓取。若需SEO，建议：

   首次加载时渲染完整HTML。

   通过服务端渲染（SSR）生成静态内容。

4. 与全页面刷新的区别

   全页面刷新（如window.location.reload()）会重置所有状态（如表单输入、滚动位置），而局部刷新仅更新指定区域，用户体验更流畅。

• 动态表单提交提交表单后局部刷新结果区域：

  $("#myForm").submit(function(e) { e.preventDefault(); $.post("/submit", $(this).serialize(), function(data) { $("#result").html(data); });});

• 无限滚动加载滚动到底部时加载更多内容：

  $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) { $("#loader").load("/more-data #items"); }});

总结：jQuery的.load()方法是实现局部刷新的首选方案，代码简洁且易于维护；原生JS方案适合无依赖环境。实际开发中需根据项目需求选择合适方法，并注意性能、错误处理和SEO优化。