AJAX 表单提交与反馈
掌握通过 AJAX 异步提交表单数据的方法，提供实时用户反馈，并在不完整刷新页面的情况下处理服务器响应，打造更流畅的用户体验。
AJAX 表单提交与反馈 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 3 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。
使用 AJAX 打造流畅表单
想象一下，无需重新加载整个页面就能提交表单！这就是 AJAX 表单提交的魅力。
AJAX 不必刷新整个页面，而是可以在后台将表单数据发送到服务器。这样可以带来更加流畅、快速的用户体验，非常适合评论、注册或快速更新。
阻止默认提交
AJAX 表单提交的第一步，是阻止浏览器的默认行为。如果不这样做，页面就会照常重新加载，从而失去使用 AJAX 的意义！
我们可以在表单的提交处理程序中调用 event.preventDefault() 来实现这一点。
<form id="myForm">
<label for="username">Name:</label>
<input type="text" id="username" name="username" placeholder="Your name">
<button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault(); // Stop default form submission
$('#status').text("Form submission prevented!");
console.log("Form submission prevented!");
});
});
</script>准备表单数据
通过 AJAX 发送表单数据前，我们需要正确地打包数据。jQuery 的 .serialize() 方法非常适合完成这项工作！
- 它会自动收集表单中所有 input、select 和 textarea 元素的值。
- 它会将这些值编码为 URL 编码字符串（例如
name=Alice&email=alice%40example.com）。 - 该字符串是向服务器发送表单数据的标准格式。
<form id="dataForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="Bob">
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="bob@example.com">
<button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#dataForm').submit(function(event) {
event.preventDefault();
let formData = $(this).serialize();
$('#output').text("Serialized: " + formData);
console.log(formData); // name=Bob&email=bob%40example.com
});
});
</script>发送 AJAX 请求
将表单数据序列化后，我们就可以把它发送到服务器。jQuery 提供了多种 AJAX 方法，其中 $.post() 是使用 HTTP POST 方法发送数据的便捷简写。
它接收服务器 URL、序列化后的数据，以及一个可选的回调函数，并在操作成功时运行该函数。
<form id="submitForm">
<label for="msg">Message:</label>
<input type="text" id="msg" name="message" value="Hello AJAX!">
<button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submitForm').submit(function(event) {
event.preventDefault();
let formData = $(this).serialize();
// Using a dummy API endpoint for demonstration
$.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
$('#response').text("Success! Server ID: " + data.id);
console.log("Server response:", data);
});
});
});
</script>显示加载反馈
用户点击提交后，通常会期待立即得到响应。由于 AJAX 请求是异步的，因此会存在延迟。提供视觉反馈非常重要！
请求进行期间，您可以显示“正在加载……”消息或加载指示器，并在收到响应后将其隐藏。
<style>
#loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
<label for="item">Item:</label>
<input type="text" id="item" name="item" value="New Widget">
<button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#feedbackForm').submit(function(event) {
event.preventDefault();
$('#loading').show(); // Show loading indicator
$('#status').text(''); // Clear previous status
let formData = $(this).serialize();
$.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
$('#loading').hide(); // Hide loading
$('#status').text("Item added with ID: " + data.id);
});
});
});
</script>处理成功响应
服务器成功处理表单数据后，通常会返回响应。这可能是一条确认消息、新创建记录的 ID，或更新后的数据。
成功回调函数（$.post() 的第三个参数）会接收这些数据，从而让您可以相应地更新界面。
<form id="addTodoForm">
<label for="todoTitle">Todo:</label>
<input type="text" id="todoTitle" name="title" placeholder="New todo item">
<button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#addTodoForm').submit(function(event) {
event.preventDefault();
$('#message').text('Adding...');
let formData = $(this).serialize();
$.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
$('#message').text('Todo added!');
$('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
$('#addTodoForm')[0].reset(); // Clear form fields
});
});
});
</script>优雅地处理错误
并非所有请求都能成功。网络问题、服务器错误或无效数据都可能导致 AJAX 请求失败。妥善处理这些错误并告知用户至关重要。
对于 $.post()，您可以链式调用 .fail() 方法。对于 $.ajax()，您可以使用 error 回调，或在返回的 Deferred 对象上使用 .fail() 方法。
<form id="errorForm">
<label for="badData">Data:</label>
<input type="text" id="badData" name="data" value="bad value">
<button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#errorForm').submit(function(event) {
event.preventDefault();
$('#errorMessage').text('');
let formData = $(this).serialize();
// Simulating an error by posting to a non-existent endpoint
$.ajax({
url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
type: "POST",
data: formData
})
.done(function(data) {
$('#errorMessage').text("Unexpected success!");
})
.fail(function(jqXHR, textStatus, errorThrown) {
$('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
console.error("AJAX Error:", textStatus, errorThrown);
});
});
});
</script>提交后清空表单
表单成功提交后，清空输入字段可以带来更好的用户体验。这样既能防止意外重复提交，也能为下一次操作提供干净的起点。
您可以在表单元素上使用原生 DOM 的 .reset() 方法，也可以手动清空各个输入值。
<form id="clearForm">
<label for="item">Item:</label>
<input type="text" id="item" name="item" value="Item A">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" value="1">
<button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#clearForm').submit(function(event) {
event.preventDefault();
$('#feedbackMsg').text('Submitting...');
let formData = $(this).serialize();
$.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
$('#feedbackMsg').text('Successfully added! ID: ' + data.id);
$('#clearForm')[0].reset(); // Clears all form fields
});
});
});
</script>完整的 AJAX 表单示例
让我们结合所学的所有技巧：阻止默认提交、序列化数据、发送 AJAX 请求、显示加载反馈、处理成功和失败响应，最后清空表单。
这种完整的处理方式可以确保 AJAX 表单体验稳健且易于使用。
<style>
#loader { display: none; color: blue; }
#result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#fullAjaxForm').submit(function(event) {
event.preventDefault(); // Stop default form submission
$('#loader').show(); // Show loading indicator
$('#result').text(''); // Clear previous results
let formData = $(this).serialize(); // Serialize form data
$.ajax({
url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
type: "POST",
data: formData,
dataType: "json" // Expect JSON response
})
.done(function(response) {
$('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
$('#fullAjaxForm')[0].reset(); // Clear form fields
})
.fail(function(jqXHR, textStatus, errorThrown) {
$('#result').css('color', 'red').text('Registration failed: ' + textStatus);
console.error("AJAX Error:", textStatus, errorThrown);
})
.always(function() {
$('#loader').hide(); // Always hide loading indicator
});
});
});
</script>检查您的理解
您已经学习了如何使用 AJAX 提交表单并提供实时反馈。让我们 test 一下您的知识！
回顾：流畅的表单提交
恭喜您！您已经掌握了 AJAX 表单提交，可以为 Web 应用带来流畅、不中断用户操作的体验。
- 您学习了如何使用
event.preventDefault()阻止表单的默认行为。 - 您使用
.serialize()轻松准备要传输的表单数据。 - 您实现了使用
$.post()或$.ajax()异步发送数据。 - 您为加载、成功和错误状态添加了重要的实时用户反馈。
- 最后，您学习了如何在提交后清空表单，从而保持界面整洁。
这些技能对于构建现代、响应灵敏的 Web 表单至关重要！
常见问题解答
「AJAX 表单提交与反馈」课时是免费的吗？
是的 — 「AJAX 表单提交与反馈」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。
「AJAX 表单提交与反馈」这节课中我会学到什么？
掌握通过 AJAX 异步提交表单数据的方法，提供实时用户反馈，并在不完整刷新页面的情况下处理服务器响应，打造更流畅的用户体验。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 3 节。
「AJAX 表单提交与反馈」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。