如何正确从表单控件中获取输入值并传递给 AJAX 请求-php教程-PHP中文网

如何正确从表单控件中获取输入值并传递给 AJAX 请求

本文详解 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 指向

，无 .val() 值 var day = $(this).val(); // ❌ 同样无效 // ... });

<form></form> 元素本身没有 value 属性，因此 $(this).val() 恒返回 undefined 或空字符串。正确做法是在表单内部精准定位目标控件，再调用其 .val() 方法。

✅ 正确写法：使用 `.find()` 或 ID 选择器精准取值

假设你的 HTML 表单结构如下（注意 id="historic_form" 已包裹所有控件）：

AJAX技术—无刷新获取数据相关课件

下载

则 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` 中解构或提供默认值