HTML表单Ajax传参问题：输入框title属性无法正确传递

看起来你遇到的是个很典型的事件绑定误区——没正确指向当前触发操作的输入框，导致不管改哪个输入框，Ajax都只会拿到第一个元素的title属性。我来帮你拆解问题根源和解决方案：

问题核心原因 #

你大概率是在事件处理函数里用了类似 $('input').attr('title')（jQuery写法）或者 document.querySelector('input').getAttribute('title')（原生JS写法）这类代码。这类选择器会默认返回匹配到的第一个元素，而非当前正在触发change事件的那个输入框，所以才会出现不管改哪个输入框，都传"BEER"的情况。

解决方案 #

情况1：用jQuery实现 #

把事件回调里的元素引用改成$(this)，它会精准指向当前触发事件的输入框：

// 给所有输入框绑定change事件
$('input').on('change', function() {
    // 获取当前输入框的title和值
    const currentTitle = $(this).attr('title');
    const inputValue = $(this).val();

    // 发起Ajax校验请求
    $.ajax({
        url: '你的校验接口地址',
        method: 'POST', // 可根据后端要求改为GET
        data: {
            field: currentTitle,
            value: inputValue
        },
        success: function(response) {
            // 这里处理校验结果，比如提示用户数据是否合法
            console.log('校验结果:', response);
        },
        error: function(xhr) {
            console.error('请求出错:', xhr);
        }
    });
});

情况2：用原生JavaScript实现 #

同样，在事件回调里用this或者循环中的当前元素来获取title：

// 获取所有输入框元素
const inputs = document.querySelectorAll('input');

// 遍历绑定change事件
inputs.forEach(input => {
    input.addEventListener('change', function() {
        // 获取当前输入框的title和值
        const currentTitle = this.getAttribute('title');
        const inputValue = this.value;

        // 用fetch发起校验请求
        fetch('你的校验接口地址', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                field: currentTitle,
                value: inputValue
            })
        })
        .then(res => res.json())
        .then(data => {
            console.log('校验成功:', data);
        })
        .catch(err => {
            console.error('校验失败:', err);
        });
    });
});

额外检查点 #

• 确认你的HTML结构里，每个输入框都正确设置了title属性，比如：

  <form>
      <input type="text" title="BEER" placeholder="啤酒">
      <input type="text" title="WINE" placeholder="红酒">
      <input type="text" title="JUICE" placeholder="果汁">
  </form>
  

• 如果你之前尝试用数组解决无效，大概率是数组遍历的时候没正确绑定每个元素的事件，或者在回调里还是引用了全局选择器，用上面的方法应该就能解决问题了。

内容的提问来源于stack exchange，提问作者Nacho Sarmiento