循环生成的多表单AJAX提交数据失效问题求助

嘿，我仔细看了你的代码，发现问题其实不是因为多个表单共用同一个class——这个做法本身没问题，jQuery可以正确绑定所有匹配的表单。真正的问题出在一个拼写错误上，还有几个可以优化的小细节，帮你一步步解决：

1. 核心错误：JavaScript里的方法名拼写错了 #

看你的JS代码里这一行：

type = that.attr('metod'),

这里把method拼成了metod（少了一个h）！这会导致AJAX请求无法正确获取表单的提交方法，自然也就没法正常传递数据了，先把这个拼写错误修正过来。

2. 简化表单数据收集（可选但推荐） #

你手动遍历表单元素收集数据的方式没问题，但jQuery提供了更简洁的serialize()方法，可以自动把所有带name属性的表单控件序列化成键值对，避免手动遍历可能出现的错误。

3. 修正PHP表单的value引号问题 #

你的PHP代码里，hidden输入的value写法会导致渲染后的值带额外的单引号：

value="' . $row_aincidents['incidentnumber'] . '"

比如incidentnumber是123的话，页面渲染后会变成value="'123'"，提交的值就会是'123'（带单引号），这大概率不是你想要的。建议改成标准的PHP输出写法，去掉多余的单引号：

修正后的完整代码 #

表单部分（PHP生成）

<form action="status_change.php" method="post" class="ajax">
    <div class="form-group">
        <input type="hidden" class="form-control" name="incidentnum" value="<?php echo $row_aincidents['incidentnumber']; ?>">
    </div>
    <div class="form-group">
        <input type="hidden" class="form-control" name="unit" value="<?php echo $row_aincidents['unitid']; ?>">
    </div>
    <div class="form-group">
        <input type="hidden" class="form-control" name="status" value="3">
    </div>
    <button type="submit" class="btn btn-primary btn-sm">STAMP</button>
</form>

JavaScript部分

$('form.ajax').on('submit', function (e) {
    // 阻止表单默认提交行为，比return false语义更清晰
    e.preventDefault();
    
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'), // 修正拼写错误
        data = that.serialize(); // 自动序列化表单数据
    
    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {
            console.log('提交成功，后端响应：', response);
            // 这里可以添加成功后的交互，比如按钮变灰、显示提示等
        },
        error: function(xhr, status, error) {
            // 增加错误处理，方便排查问题
            console.error('提交出错：', error);
        }
    });
});

额外建议 #

• 加上error回调函数，这样如果后端接口出错或者请求失败，你能在控制台看到具体错误信息，方便排查
• 可以给提交按钮添加加载状态，比如点击后禁用按钮并显示"提交中..."，避免用户重复点击

按照上面的修改，你的AJAX提交应该就能正常传递表单数据啦！

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