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

步骤：

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

   中。

   示例代码：

   

   存了个图

   视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

   下载

   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 = '
   Error occurred during the search.
   ';
     }
   });

   注意事项：

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

   优点：

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

   缺点：

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

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

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

   优点：

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

   缺点：

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

   总结

   选择哪种方法取决于具体的需求和场景。 如果需要完全隔离表单内容，