如何在不刷新整个页面的情况下，将表单提交到特定 DIV 中

本文旨在解决如何将表单提交到页面上的特定 <div> 元素中，而无需刷新整个页面。我们将探讨使用 <iframe>、拦截表单提交并使用 AJAX 的方法，以及更常见但可能更适合的页面刷新方法，并讨论各自的优缺点，帮助开发者选择最适合自己场景的方案。

在 Web 开发中，有时我们需要将表单提交到页面的特定区域，而不是刷新整个页面。一个常见的场景是分页浏览，希望在不影响其他区域内容的情况下，更新结果显示区域。虽然 HTML 表单的 target 属性主要用于指定窗口、标签或框架，但我们可以通过其他方式实现将表单提交到 <div> 元素的目的。

方法一：使用 <iframe>

一种方法是将目标 <div> 替换为 <iframe>。 这样做的好处是表单可以提交到 <iframe> 中加载的单独文档，而无需指定 target 属性，因为默认行为是将表单提交到当前框架。

示例：

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

在 search_result.html 中，您可以放置包含表单的代码。表单提交后，只会刷新 <iframe> 的内容，而不会影响 searchCriteria <div>。

优点：

• 实现简单，无需编写大量 JavaScript 代码。
• 隔离性好，<iframe> 中的代码与主页面代码相互隔离。

缺点：

• <iframe> 会增加页面的复杂性。
• <iframe> 的内容与主页面内容之间的数据传递相对复杂。

方法二：使用 AJAX 拦截表单提交

更灵活的方法是使用 JavaScript 拦截表单提交，然后使用 AJAX 将表单数据发送到服务器，并将响应更新到目标 <div> 中。

步骤：

表单大师AI

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

74

查看详情

1. 拦截表单提交事件： 使用 addEventListener 监听表单的 submit 事件。
2. 阻止默认行为： 使用 preventDefault() 阻止表单的默认提交行为。
3. 收集表单数据： 使用 FormData 对象收集表单数据。
4. 使用 Fetch API 发送 AJAX 请求： 使用 Fetch API 将表单数据发送到服务器。
5. 更新 <div> 内容： 在 AJAX 请求成功后，使用 innerHTML 属性将服务器返回的内容更新到目标 <div> 中。

示例代码：

const form = document.querySelector('#searchResult form');
const searchResultDiv = document.getElementById('searchResult');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const formData = new FormData(form);

  try {
    const response = await fetch(form.action, {
      method: form.method,
      body: formData,
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.text(); // 或者 response.json()，取决于服务器返回的数据类型
    searchResultDiv.innerHTML = data;
  } catch (error) {
    console.error('Error:', error);
    searchResultDiv.innerHTML = '<p>Error occurred during the search.</p>';
  }
});

注意事项：

• 确保服务器端能够正确处理 AJAX 请求，并返回更新后的内容。
• 在处理服务器返回的数据时，需要注意 XSS 安全问题，避免将恶意代码注入到页面中。
• 根据实际情况选择合适的数据格式（例如，JSON 或 HTML）。

优点：

• 灵活性高，可以完全控制表单提交和页面更新的过程。
• 用户体验好，无需刷新整个页面即可更新内容。

缺点：

• 需要编写较多的 JavaScript 代码。
• 需要考虑 XSS 安全问题。

方法三：刷新整个页面并保留搜索条件

虽然本文的重点是在不刷新整个页面的情况下提交表单，但通常更常见的方法是刷新整个页面，并在分页链接中包含保留搜索条件所需的数据。 这样，当页面重新加载时，可以重新创建搜索条件。

优点：

• 实现简单，无需编写复杂的 JavaScript 代码。
• 与浏览器的历史记录和书签功能兼容。

缺点：

• 可能会导致页面闪烁，影响用户体验。
• 每次分页都需要重新加载整个页面，效率较低。

总结

选择哪种方法取决于具体的需求和场景。 如果需要完全隔离表单内容，<iframe> 可能是一个不错的选择。 如果需要高度的灵活性和良好的用户体验，使用 AJAX 拦截表单提交可能更合适。 如果性能不是关键因素，并且希望与浏览器的历史记录和书签功能兼容，则刷新整个页面并保留搜索条件可能是一个更简单的选择。 无论选择哪种方法，都需要仔细考虑安全问题，并确保服务器端能够正确处理请求。

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