jquery.form.js如何实现表单无刷新提交？-建站教程-锦华智联科技

`jquery.form.js` 教程：简化 AJAX 表单提交的利器

jquery.form.js 是一个非常流行且功能强大的 jQuery 插件，它的核心使命是：让你用最少的代码，将传统的 HTML 表单提交升级为无刷新的 AJAX 提交，在它出现之前，实现一个带有文件上传、进度条和表单验证的 AJAX 提交功能需要编写大量的 JavaScript 代码,而这个插件将这一切都变得异常简单。

（图片来源网络，侵删）

为什么需要 `jquery.form.js`？解决了什么问题？

在 AJAX 时代,我们希望表单提交时：

页面不刷新：用户体验更好,无需等待整个页面重新加载。
异步提交：在后台发送数据,用户可以继续操作页面。
处理响应：提交成功或失败后，能根据服务器返回的结果执行相应操作（如更新页面内容、显示成功/错误消息）。
文件上传：这是最头疼的部分，原生 AJAX XMLHttpRequest 无法直接处理文件上传，需要借助 FormData 对象，而 jquery.form.js 封装了这一切。

jquery.form.js 就是为了优雅地解决这些问题而生的。

核心功能与优势

极简 API：只需一行代码，就能将一个普通的表单变成 AJAX 表单。
无缝集成：无需修改你的 HTML 表单结构，它直接基于现有的 <form> 标签工作。
强大的选项：提供了丰富的配置选项，如 target, beforeSubmit, success, error 等,让你可以精确控制提交的每一个环节。
文件上传支持：开箱即用地支持文件上传,包括多文件上传和进度显示。
进度条回调：可以轻松实现上传进度条,提升用户体验。
兼容性：对各种浏览器有良好的兼容性。

快速上手：你的第一个 AJAX 表单

准备工作

确保你的页面已经引入了 jQuery 和 jquery.form.js。

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 jquery.form.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

HTML 表单

创建一个标准的 HTML 表单，注意，我们不需要在表单上添加任何 onsubmit 事件或 action/method 属性（保留它们也无妨，插件会优先使用插件自身的配置）。

（图片来源网络，侵删）

<!-- index.html -->
<form id="myForm">
    <div>
        <label for="name">姓名:</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email">
    </div>
    <div>
        <label for="message">留言:</label>
        <textarea name="message" id="message" rows="5"></textarea>
    </div>
    <div>
        <button type="submit">提交</button>
    </div>
</form>
<!-- 用于显示服务器返回的响应 -->
<div id="output"></div>

JavaScript 初始化

这是最关键的一步，使用 ajaxForm() 或 ajaxSubmit() 方法来“激活”表单。

ajaxForm()：通常在 DOM 加载完成后调用，它会监听表单的 submit 事件，当用户点击提交按钮时，触发 AJAX 提交。这是最常用的方式。
ajaxSubmit()：立即提交表单，它不会等待 submit 事件，适用于在点击其他按钮（比如一个“保存”按钮）时手动触发表单提交。

// $(document).ready() 的简写
$(function() {
    // 使用 ajaxForm() 方法
    $('#myForm').ajaxForm({
        // success: function(data) {
        //     console.log('提交成功!', data);
        //     $('#output').html(data);
        // }
    });
});

后端服务器（以 PHP 为例）

为了演示,我们需要一个简单的后端来接收并返回数据。

// process.php
<?php
header('Content-Type: application/json'); // 告诉前端我们返回的是 JSON
// 获取 POST 数据
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$message = $_POST['message'] ?? '';
// 简单的验证
if (empty($name) || empty($email)) {
    // 返回错误信息
    echo json_encode(['status' => 'error', 'message' => '姓名和邮箱不能为空！']);
} else {
    // 模拟处理数据...
    sleep(1); // 模拟耗时操作
    // 返回成功信息
    echo json_encode([
        'status' => 'success', 
        'message' => '数据提交成功！',
        'data' => [
            'name' => $name,
            'email' => $email,
            'message' => $message
        ]
    ]);
}
?>

当你填写表单并点击“提交”按钮时，页面不会刷新，但 #output 区域会显示 process.php 返回的 JSON 字符串。

核心 API 与配置详解

jquery.form.js 的强大之处在于其丰富的配置选项，我们通常将它们作为对象传递给 ajaxForm() 或 ajaxSubmit()。

`url` (String)

说明：指定表单提交的目标 URL，如果未设置，则使用表单的 action 属性。
示例：url: 'process.php'

`type` (String)

说明：指定请求方法 (GET 或 POST)，如果未设置，则使用表单的 method 属性，默认为 GET。
示例：type: 'POST'

`target` (String 或 jQuery 对象)

说明：一个极其有用的选项，指定一个选择器或 jQuery 对象，服务器返回的 HTML 将被直接插入到该元素的内部。这会覆盖 success 回调。

示例：

<div id="resultContainer"></div>

$('#myForm').ajaxForm({
    target: '#resultContainer'
});

`beforeSubmit` (Function)

说明：在表单数据被序列化并发送到服务器之前，会调用此函数,它非常适合用于：
- 表单验证：如果验证失败，返回 false 可以阻止表单提交。
- 数据处理：在提交前修改数据。
参数：
- arr: 数组，包含所有表单字段的数据，格式如 [{name: 'name', value: '张三'}, {name: 'email', value: 'a@example.com'}]。
- $form: jQuery 对象,指向当前表单。
- options: 提交时使用的配置选项对象。

示例：

$('#myForm').ajaxForm({
    beforeSubmit: function(arr, $form, options) {
        console.log('即将提交的数据:', arr);
        // 简单验证
        if (arr[0].value.length < 2) {
            alert('姓名太短了！');
            return false; // 返回 false 阻止提交
        }
        return true; // 返回 true 继续提交
    }
});

`success` (Function)

说明：当服务器成功返回响应时调用,这是处理响应最常用的方式。
参数：
- data: 服务器返回的数据（字符串）。
- statusText: 请求状态文本，如 "success", "notmodified" 等。
- xhr: 原生的 XMLHttpRequest 对象。
- $form: jQuery 对象,指向当前表单。

示例：

$('#myForm').ajaxForm({
    success: function(data, statusText, xhr, $form) {
        console.log('服务器返回:', data);
        // 假设服务器返回的是 JSON
        var response = JSON.parse(data);
        if (response.status === 'success') {
            $('#output').html('<p style="color: green;">' + response.message + '</p>');
        } else {
            $('#output').html('<p style="color: red;">' + response.message + '</p>');
        }
    }
});

`error` (Function)

说明：当请求失败时调用（网络错误、服务器 500 错误）。
参数：
- xhr: 原生的 XMLHttpRequest 对象。
- statusText: 错误状态文本，如 "timeout", "error", "parsererror"。
- errorThrown: 抛出的错误对象。

示例：

$('#myForm').ajaxForm({
    error: function(xhr, statusText, errorThrown) {
        console.error('提交失败:', statusText, errorThrown);
        $('#output').html('<p style="color: red;">提交失败，请检查网络连接或稍后重试。</p>');
    }
});

`clearForm` (Boolean)

说明：提交成功后是否清空表单字段，默认为 false。
示例：clearForm: true

`resetForm` (Boolean)

说明：提交成功后是否重置表单（将所有字段恢复到初始值），默认为 false。
示例：resetForm: true

高级功能：文件上传与进度条

文件上传

文件上传的实现和普通表单完全一样！你只需要在表单中添加 <input type="file"> 即可。jquery.form.js 会自动检测并使用 FormData 来处理。

<form id="uploadForm">
    <input type="file" name="myFile">
    <button type="submit">上传文件</button>
</form>
<div id="uploadProgress"></div>

上传进度条

要实现进度条，需要利用 XMLHttpRequest 对象的 upload.onprogress 事件。

$('#uploadForm').ajaxForm({
    // 其他配置...
    beforeSend: function() {
        // 开始上传时显示进度条
        $('#uploadProgress').html('<div id="progressBar" style="width:0%; height:20px; background-color:#f0f0f0;"></div>');
    },
    uploadProgress: function(event, position, total, percentComplete) {
        // 更新进度条
        var percentVal = percentComplete + '%';
        $('#progressBar').width(percentVal);
        $('#progressBar').html(percentVal);
    },
    success: function(data) {
        // 上传成功
        console.log('上传成功!', data);
    },
    error: function() {
        // 上传失败
        $('#uploadProgress').html('<p style="color: red;">上传失败！</p>');
    }
});

`ajaxForm()` vs. `ajaxSubmit()` 的区别

特性	`ajaxForm()`	`ajaxSubmit()`
触发时机	被动触发，它会自动监听表单的 `submit` 事件，当用户点击提交按钮时，才会触发 AJAX 提交。	主动触发，调用此方法后，会立即提交表单，无需等待 `submit` 事件。
使用场景	最常用，适用于标准的表单提交场景。	适用于非标准提交，比如点击一个外部按钮来提交表单，或者在表单验证通过后手动提交。
示例	`$('#myForm').ajaxForm(options);`	`$('#myForm').ajaxSubmit(options);`

现代替代方案：`fetch` API 和 `axios`

虽然 jquery.form.js 非常经典，但在现代前端开发中,我们有更现代的选择：

fetch API：现代浏览器内置的 API，Promise-based，语法更简洁,但处理文件上传和错误捕获相对原生一些。
axios：一个基于 Promise 的 HTTP 客户端，非常流行，它提供了比 fetch 更友好的 API（如自动 JSON 转换、拦截器、更统一的错误处理），是目前处理 AJAX 请求（包括表单提交）的主流选择。

使用 axios 实现我们第一个例子：

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交
    const formData = new FormData(this); // 'this' 指向表单元素
    axios.post('process.php', formData)
        .then(function (response) {
            // response.data 是服务器返回的数据
            console.log('提交成功!', response.data);
            $('#output').html(JSON.stringify(response.data, null, 2));
        })
        .catch(function (error) {
            console.error('提交失败:', error);
            $('#output').html('<p style="color: red;">提交失败！</p>');
        });
});

对于维护老旧的 jQuery 项目，jquery.form.js 依然是快速、可靠的选择。
对于新项目，特别是使用 Vue, React 等现代框架的项目，推荐使用 axios 或 fetch API，因为它们是异步编程的主流范式，与 Promise 结合得更好。

特性	`jquery.form.js`	`axios` / `fetch`
学习曲线	非常低，一行代码搞定	需要理解 Promise 和异步编程
核心优势	极简，专为表单设计，功能封装完善	灵活，通用，是现代 HTTP 请求的标准
适用场景	快速集成到传统 jQuery 项目，处理复杂表单	新项目，现代框架，需要更精细控制请求
依赖	依赖 jQuery	不依赖（fetch），或依赖 axios 库

希望这份详细的教程能帮助你完全掌握 jquery.form.js！

jquery.form.js如何实现表单无刷新提交？

jquery.form.js 教程：简化 AJAX 表单提交的利器

为什么需要 jquery.form.js？解决了什么问题？

核心功能与优势

快速上手：你的第一个 AJAX 表单

准备工作

HTML 表单

JavaScript 初始化

后端服务器（以 PHP 为例）

核心 API 与配置详解

url (String)

type (String)

target (String 或 jQuery 对象)

beforeSubmit (Function)

success (Function)

error (Function)

clearForm (Boolean)

resetForm (Boolean)