JS无刷新提交表单的5种方法详解

从现在开始，我们要努力学习啦！今天我给大家带来《JS无刷新提交表单的5种技巧解析》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

无需刷新页面即可提交表单的核心方法包括使用XMLHttpRequest对象、Fetch API、jQuery的$.ajax()方法、iframe以及第三方库如Axos。1. XMLHttpRequest是经典方法，通过阻止默认提交行为并利用FormData异步发送数据；2. Fetch API基于Promise，代码更简洁易读；3. jQuery的$.ajax()方法更为简化，但需引入jQuery库；4. iframe方法兼容性好，适合老旧浏览器；5. Axios等第三方库提供更多高级功能。服务器端应返回JSON或HTML片段以供前端更新内容，并注意CSRF防护、输入验证、HTTPS加密及文件上传限制，确保安全性与稳定性。

无需刷新页面即可提交表单，这在现代Web开发中至关重要，能显著提升用户体验。核心在于利用JavaScript的XMLHttpRequest对象或Fetch API，配合HTML5的FormData对象，将表单数据异步发送到服务器，并在服务器处理完成后，更新页面局部内容。

解决方案：

1. 使用XMLHttpRequest对象 (经典方法):

   document.getElementById('myForm').addEventListener('submit', function(e) {
       e.preventDefault(); // 阻止默认的表单提交行为
   
       var xhr = new XMLHttpRequest();
       var formData = new FormData(this);
   
       xhr.open('POST', this.action, true); // this.action 是表单的提交URL
   
       xhr.onload = function() {
           if (xhr.status >= 200 && xhr.status < 300) {
               // 请求成功
               console.log('提交成功', xhr.responseText);
               // 在这里更新页面内容，例如显示成功消息
               document.getElementById('result').innerHTML = '提交成功！';
           } else {
               // 请求失败
               console.error('提交失败', xhr.status, xhr.statusText);
               document.getElementById('result').innerHTML = '提交失败，请重试。';
           }
       };
   
       xhr.onerror = function() {
           console.error('网络错误');
           document.getElementById('result').innerHTML = '网络错误，请检查网络连接。';
       };
   
       xhr.send(formData);
   });

   这里，e.preventDefault()阻止了浏览器的默认表单提交行为，FormData对象方便地收集了表单数据。xhr.onload处理成功情况，xhr.onerror处理网络错误。

   

2. 使用Fetch API (现代方法):

   document.getElementById('myForm').addEventListener('submit', async function(e) {
       e.preventDefault();
   
       const formData = new FormData(this);
   
       try {
           const response = await fetch(this.action, {
               method: 'POST',
               body: formData
           });
   
           if (!response.ok) {
               throw new Error(`HTTP error! status: ${response.status}`);
           }
   
           const data = await response.text(); // 或者 response.json()，取决于服务器返回的数据格式
           console.log('提交成功', data);
           document.getElementById('result').innerHTML = '提交成功！' + data;
   
       } catch (error) {
           console.error('提交失败', error);
           document.getElementById('result').innerHTML = '提交失败，请重试。' + error;
       }
   });

   Fetch API使用Promise，代码更简洁，更易于理解和维护。await关键字使异步代码看起来更像同步代码。

3. 使用jQuery的$.ajax()方法:

   如果项目已经引入了jQuery，可以使用更简洁的$.ajax()方法：

   $('#myForm').submit(function(e) {
       e.preventDefault();
   
       $.ajax({
           url: this.action,
           type: 'POST',
           data: new FormData(this),
           processData: false, //  不处理数据
           contentType: false, //  不设置内容类型
           success: function(data) {
               console.log('提交成功', data);
               $('#result').html('提交成功！' + data);
           },
           error: function(xhr, status, error) {
               console.error('提交失败', error);
               $('#result').html('提交失败，请重试。' + error);
           }
       });
   });

   processData: false 和 contentType: false 是关键，确保FormData对象能正确发送。

4. 利用iframe (兼容性较好的老方法):

   创建一个隐藏的iframe，将表单的target属性设置为该iframe，提交后，服务器的响应会在iframe中加载，不会刷新整个页面。

   <iframe id="hiddenFrame" name="hiddenFrame" style="display:none;"></iframe>
   
   <form id="myForm" action="/submit" method="post" target="hiddenFrame">
       <!-- 表单元素 -->
   </form>
   
   <script>
       document.getElementById('hiddenFrame').onload = function() {
           // iframe加载完成后，获取iframe的内容并更新页面
           var iframeDocument = this.contentDocument || this.contentWindow.document;
           var response = iframeDocument.body.innerHTML;
           document.getElementById('result').innerHTML = response;
       };
   </script>

   这种方法兼容性好，但控制不如前几种方法灵活。

5. 使用第三方库 (例如axios):

   Axios是一个流行的基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。

   document.getElementById('myForm').addEventListener('submit', async function(e) {
       e.preventDefault();
   
       const formData = new FormData(this);
   
       try {
           const response = await axios.post(this.action, formData);
           console.log('提交成功', response.data);
           document.getElementById('result').innerHTML = '提交成功！' + response.data;
   
       } catch (error) {
           console.error('提交失败', error);
           document.getElementById('result').innerHTML = '提交失败，请重试。' + error;
       }
   });

   Axios提供了更强大的功能，例如请求取消、自动转换JSON数据等。

无刷新提交表单时，服务器端如何处理返回数据？

服务器端接收到表单数据后，可以返回JSON格式的数据，包含状态码、消息等信息。前端JavaScript代码根据这些信息更新页面。例如，服务器返回{ "status": "success", "message": "提交成功" }，前端可以显示“提交成功”的消息。如果返回{ "status": "error", "message": "用户名已存在" }，前端可以显示错误提示。返回HTML片段也是一种选择，前端直接将HTML片段插入到页面中。

如何处理文件上传的无刷新表单提交？

文件上传需要使用FormData对象，并且确保XMLHttpRequest或Fetch API正确设置了请求头。在HTML中，表单需要包含元素。服务器端需要正确处理上传的文件，并返回相应的响应。注意，文件上传可能会受到服务器端的文件大小限制，需要进行适当的配置。

无刷新提交表单的安全性考虑有哪些？

需要防止跨站请求伪造（CSRF）攻击。可以在表单中添加一个隐藏的CSRF令牌，服务器验证该令牌的有效性。同时，需要对用户输入进行验证和过滤，防止XSS攻击。对于敏感数据，建议使用HTTPS协议进行加密传输。另外，需要限制文件上传类型和大小，防止恶意文件上传。

终于介绍完啦！小伙伴们，这篇关于《JS无刷新提交表单的5种方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！