如何在不刷新整个页面的情况下，将表单提交到指定DIV容器内-js教程-PHP中文网

如何在不刷新整个页面的情况下，将表单提交到指定DIV容器内

碧海醫心

发布： 2025-08-20 18:26:32

原创

832人浏览过

如何在不刷新整个页面的情况下，将表单提交到指定div容器内

本文介绍了如何在不刷新整个页面的情况下，将位于特定 <div> 容器内的表单提交到该容器内。主要探讨了使用 <iframe> 标签、拦截表单提交并使用 Ajax 技术更新 <div> 内容的两种方案，并讨论了保留搜索条件进行分页的更常见方法。

在Web开发中，有时我们需要将表单提交的结果只更新页面上的特定区域，而不是刷新整个页面。一个常见的场景是在一个包含搜索结果的 <div> 中，通过分页导航链接提交表单，只更新搜索结果区域。直接使用 <form> 标签的 target 属性无法实现此目的，因为它只能定位窗口、选项卡或框架。以下将介绍两种可行的解决方案。

方案一：使用 <iframe>

示例代码：

主页面 (index.html):

<div id="searchCriteria">
  // 搜索条件
</div>
<iframe id="searchResult" src="search_result.html"></iframe>

登录后复制

search_result.html:

<form action="search_result.html" method="GET">
  <input type="text" name="query" value="initial value">
  <button type="submit">搜索</button>
</form>
<div id="results">
  // 初始搜索结果
</div>

登录后复制

当在search_result.html 中提交表单时，结果将仅在 <iframe> 内部更新，而不会影响主页面的其他部分。

注意事项：

<iframe> 会增加页面的复杂性，并且可能对 SEO 产生影响。
需要维护额外的 HTML 文件。
父页面和 <iframe> 之间的通信可能需要额外的代码。

方案二：使用 Ajax

另一种方案是使用 JavaScript 拦截表单提交，然后使用 Ajax 技术将表单数据发送到服务器，并将服务器返回的结果更新到目标 <div> 中。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

示例代码：

<div id="searchCriteria">
  // 搜索条件
</div>
<div id="searchResult">
  <form id="searchForm" action="/search" method="GET">
    <input type="text" name="query" value="initial value">
    <button type="submit">搜索</button>
  </form>
  <div id="results">
    // 初始搜索结果
  </div>
</div>

<script>
  const form = document.querySelector('#searchForm');
  form.addEventListener('submit', async (event) => {
    event.preventDefault(); // 阻止表单的默认提交行为

    const formData = new FormData(form);
    const response = await fetch('/search', {
      method: 'GET',
      body: formData,
    });

    const html = await response.text();
    document.querySelector('#searchResult').innerHTML = html;
  });
</script>

登录后复制

代码解释：

event.preventDefault(): 阻止表单的默认提交行为，防止页面刷新。
new FormData(form): 创建一个 FormData 对象，包含表单中的所有数据。
fetch('/search', ...): 使用 Fetch API 发送 Ajax 请求到服务器的 /search 路径。
response.text(): 将服务器返回的响应转换为文本（HTML）。
document.querySelector('#searchResult').innerHTML = html: 将服务器返回的 HTML 替换目标 <div> 的内容。

注意事项：

需要服务器端代码来处理 Ajax 请求，并返回相应的 HTML 内容。
需要考虑错误处理和加载状态的显示。
可以使用更高级的 JavaScript 框架（如 React、Vue 或 Angular）来简化 Ajax 请求和 DOM 操作。

更常见的做法：保留搜索条件进行分页

虽然上述两种方案可以实现将表单提交到特定 <div> 的目的，但更常见的做法是在分页链接中包含所有必要的搜索条件，以便在点击分页链接时重新创建搜索结果。

例如，可以将搜索条件作为 URL 参数添加到分页链接中：

<a href="?query=keyword&page=2">下一页</a>

登录后复制

当用户点击 "下一页" 链接时，整个页面将被重新加载，并且服务器可以使用 URL 参数中的搜索条件来重新生成搜索结果。这种方法更简单，更易于维护，并且更符合 Web 的标准行为。

总结：

本文介绍了两种将表单提交到特定 <div> 的方法：使用 <iframe> 和使用 Ajax。虽然这两种方法都可以实现目标，但更常见的做法是在分页链接中包含所有必要的搜索条件。选择哪种方法取决于具体的需求和项目的复杂性。

以上就是如何在不刷新整个页面的情况下，将表单提交到指定DIV容器内的详细内容，更多请关注php中文网其它相关文章！