如何正确使用 jQuery 获取表单输入框的值并在 AJAX 请求中提交-php教程-PHP中文网

如何正确使用 jQuery 获取表单输入框的值并在 AJAX 请求中提交

本文详解 jQuery 中通过 ID 和 name 属性获取 input 值的差异，重点解决因选择器误用导致 $("input[name='phone']").val() 返回 null 的常见问题，并提供可直接复用的健壮 AJAX 提交方案。

本文详解 jquery 中通过 id 和 name 属性获取 input 值的差异，重点解决因选择器误用导致 `$("input[name='phone']").val()` 返回 null 的常见问题，并提供可直接复用的健壮 ajax 提交方案。

在实际开发中，许多开发者会遇到“明明 DOM 存在、控制台无报错，但 jQuery 却取不到 input 值”的困惑。本例中，$("input[name='phone']").val() 返回 null 或空字符串，根本原因并非逻辑错误，而是DOM 结构与选择器匹配失效——尤其当页面存在多个同名 name="phone" 的 input（如动态渲染、表单嵌套、SPA 多次初始化等场景），或该元素被包裹在隐藏/条件渲染区块中（如本例中 .verify-otp-wrapper 初始为 display: none，但 name="phone" 元素实际始终在 DOM 中），$("input[name='phone']") 可能意外匹配到非预期节点，甚至返回空集合。

✅ 推荐解法：优先使用唯一 ID 选择器
HTML 中已为手机号输入框明确设置了 id="phone"，这是最稳定、性能最优的选择：

// ✅ 正确且可靠：基于唯一 ID 获取值
var phone = $("#phone").val(); // 等价于 document.getElementById("phone").value

// ❌ 风险较高：name 属性不保证唯一，易受 DOM 变化影响
// var phone = $("input[name='phone']").val(); // 可能返回第一个匹配项（非预期）或空

同时注意 OTP 输入框的 id="partitioned" 也应统一使用 ID 选择器，避免 name="otp_code" 在多表单环境中冲突：

// 提交登录时
phone: $("#phone").val(),
otp: $("#partitioned").val() // 替代 $("input[name='otp_code']").val()

// 发送 OTP 时
phone: $("#phone").val() // 确保获取的是当前可见且有效的手机号

? 关键注意事项：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

确保 DOM 加载完成：所有 $("#phone") 调用必须位于 $(document).ready() 内或元素插入 DOM 后执行；
验证值有效性：在发送请求前建议增加空值校验，提升用户体验：
```
const phoneVal = $("#phone").val().trim();
if (!phoneVal || phoneVal.length 
```
禁用按钮防重复提交：当前代码已通过 $(this).prop('disabled', true) 实现，但需在 AJAX fail 或异常流程中恢复按钮状态，否则用户将无法重试；
移动端兼容性：type="number" 在部分 iOS 版本中可能触发键盘数字模式但允许输入字母，建议后端仍做严格格式校验（如 ^9[0-9]{9}$）。