本文详解 jQuery 中通过 $(this) 绑定表单提交事件时，为何无法直接调用 .val() 获取子元素值，并提供正确的 DOM 元素定位与值提取方法，帮助初学者避免常见取值错误。
本文详解 jquery 中通过 `$(this)` 绑定表单提交事件时，为何无法直接调用 `.val()` 获取子元素值，并提供正确的 dom 元素定位与值提取方法，帮助初学者避免常见取值错误。
在使用 jQuery 处理表单提交并发送 AJAX 请求时，一个高频误区是误将表单（<form></form>）本身当作可取值的输入控件。正如示例代码所示：
$('#historic_form').submit(function(e) {
e.preventDefault();
var fund_id = $(this).val(); // ❌ 错误：this 指向 <form>，无 .val() 值
var day = $(this).val(); // ❌ 同样无效
// ...
});<form></form> 元素本身没有 value 属性，因此 $(this).val() 恒返回 undefined 或空字符串。正确做法是在表单内部精准定位目标控件，再调用其 .val() 方法。
✅ 正确写法：使用 .find() 或 ID 选择器精准取值
假设你的 HTML 表单结构如下（注意 id="historic_form" 已包裹所有控件）：
<form id="historic_form"> <select required id="member_id" name="member_id" class="form-control">...</select> <select required id="fund_id" name="fund_id" class="form-control">...</select> <input type="date" required name="day" id="histDate" class="form-control datepicker"> </form>
则 JavaScript 应修正为：
$('#historic_form').submit(function(e) {
e.preventDefault();
// ✅ 方式1：通过 this.find() 在当前表单内查找（推荐，语义清晰）
var fund_id = $(this).find('#fund_id').val();
var day = $(this).find('#histDate').val();
// ✅ 方式2：直接使用 ID 选择器（简洁，但依赖全局唯一 ID）
// var fund_id = $('#fund_id').val();
// var day = $('#histDate').val();
// 发起 AJAX 请求
$.ajax({
url: 'Search/Searchday',
type: 'POST',
dataType: 'json',
data: { fund_id: fund_id, day: day },
error: function() {
alert('请求失败，请检查日期和基金选项是否已选择！');
},
success: function(response) {
// 注意：原代码中 title / description 未定义，需根据 response 动态提取
// 示例修正：
$("tbody").append(
`<tr><td>${response.title || 'N/A'}</td><td>${response.description || 'N/A'}</td></tr>`
);
}
});
});⚠️ 关键注意事项
-
必填项校验：
<select></select>使用disabled selected的占位选项（如"Select Fund"）其value为空字符串，务必在提交前校验：if (!fund_id || !day) { alert('请完整填写基金和日期！'); return; } -
日期输入兼容性：
<input type="date">返回格式为YYYY-MM-DD（ISO 8601），后端需按此格式解析；若需dd/mm/yyyy，建议前端格式化或改用moment.js/Intl.DateTimeFormat处理。 -
避免变量污染：原代码中
success回调里的title和description未声明，会导致ReferenceError，应从response对象中安全读取。
✅ 总结
| 错误做法 | 正确做法 |
|---|---|
$(this).val()（对 <form></form> 调用） |
$(this).find('#id').val() 或 $('#id').val()
|
| 忽略空值校验 | 提交前 if (!val) return 阻断无效请求 |
直接使用未定义变量（如 title） |
从 response 中解构或提供默认值 |
掌握“容器→子元素→取值”这一链式思维，是 jQuery 表单交互开发的基础能力。后续可进一步封装为通用表单序列化函数，提升复用性与健壮性。
