本文介绍了如何在不刷新整个页面的情况下，将位于特定
容器内的表单提交到该容器内。主要探讨了使用
注意事项：
- 需要维护额外的 HTML 文件。
- 父页面和
方案二：使用 Ajax
另一种方案是使用 JavaScript 拦截表单提交，然后使用 Ajax 技术将表单数据发送到服务器，并将服务器返回的结果更新到目标
中。
示例代码：
<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 替换目标
的内容。
注意事项：
- 需要服务器端代码来处理 Ajax 请求，并返回相应的 HTML 内容。
- 需要考虑错误处理和加载状态的显示。
- 可以使用更高级的 JavaScript 框架（如 React、vue 或 angular）来简化 Ajax 请求和 dom 操作。
更常见的做法：保留搜索条件进行分页
虽然上述两种方案可以实现将表单提交到特定
的目的，但更常见的做法是在分页链接中包含所有必要的搜索条件，以便在点击分页链接时重新创建搜索结果。例如，可以将搜索条件作为 URL 参数添加到分页链接中：
<a href="?query=keyword&page=2">下一页</a>
当用户点击 “下一页” 链接时，整个页面将被重新加载，并且服务器可以使用 URL 参数中的搜索条件来重新生成搜索结果。 这种方法更简单，更易于维护，并且更符合 Web 的标准行为。
总结：
本文介绍了两种将表单提交到特定
的方法：使用
