容器内，而避免刷新整个页面的问题。我们将探讨使用
最直接的方法是将目标
替换为。 src属性指定了初始加载的JSP页面。
修改JSP页面：
确保search_result.jsp页面包含表单，并且表单的提交目标是自身（默认行为）。无需指定target属性。
这种方法的优点是简单易懂，不需要编写额外的JavaScript代码。缺点是引入了
方案二：使用 AJAX 拦截表单提交
更灵活的方法是使用JavaScript拦截表单的提交事件，然后使用AJAX将表单数据发送到服务器，并将服务器返回的结果更新到目标
中。
-
拦截表单提交事件：
使用addEventListener监听表单的submit事件。
const form = document.querySelector('#searchResult form'); form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单的默认提交行为 // ...后续代码 }); -
获取表单数据：
使用FormData对象获取表单数据。
const formData = new FormData(form);
-
使用 Fetch API 发送 AJAX 请求：
使用fetch API将表单数据发送到服务器。
fetch(form.action, { method: form.method, body: formData }) .then(response => response.text()) .then(data => { // 将服务器返回的数据更新到目标 <div> 中 document.querySelector('#searchResult').innerHTML = data; }) .catch(error => { console.error('Error:', error); });- form.action：表单的提交URL。
- form.method：表单的提交方法（GET或POST）。
- response.text()：将服务器返回的响应解析为文本。
- document.querySelector(‘#searchResult’).innerHTML = data;：将服务器返回的数据更新到#searchResult
中。
完整代码示例如下：
<div id="searchResult"> <form action="/search" method="POST"> <input type="text" name="query" value="example"> <button type="submit">Search</button> </form> </div> <script> const form = document.querySelector('#searchResult form'); form.addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(form); fetch(form.action, { method: form.method, body: formData }) .then(response => response.text()) .then(data => { document.querySelector('#searchResult').innerHTML = data; }) .catch(error => { console.error('Error:', error); }); }); </script>这种方法的优点是灵活性高，可以完全控制表单提交和结果更新的过程。缺点是需要编写较多的JavaScript代码。
注意事项
- 安全性： 在使用AJAX提交表单时，要注意处理跨站请求伪造（csrf）攻击。
- 错误处理： 在AJAX请求中，要处理可能发生的错误，例如网络错误、服务器错误等。
- 用户体验： 在AJAX请求期间，可以显示加载指示器，以提高用户体验。
总结
本文介绍了两种将表单提交到指定
中而不刷新整个页面的方法：使用
