首页 > 文章 > 前端

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

时间：2025-06-24 14:16:12 194浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《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加密及文件上传限制，确保安全性与稳定性。

js怎样实现无刷新提交表单 js无刷新提交表单的5种实用技巧解析

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

解决方案：

使用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处理网络错误。

使用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关键字使异步代码看起来更像同步代码。

使用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对象能正确发送。

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

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

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

使用第三方库 (例如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学习网公众号也会发布文章相关知识，快来关注吧！

JS 无刷新提交