如何使用jQuery与AJAX实现多个同class提交按钮无刷新提交表单

1. 修改JavaScript通用监听逻辑 #

原代码仅绑定了id为p1的单个表单，替换为绑定所有带t类的表单即可实现通用适配，无需为每个表单单独编写监听逻辑：

$(document).ready(function(){
    // 将选择器从#p1改为.t，匹配所有class为t的表单
    $('body').on('submit', '.t', function(event) {
        event.preventDefault();
        const $currentForm = $(this); // 缓存当前提交的表单实例
        const formData = $currentForm.serialize();
        $.ajax({
            type : 'POST',
            url : 'answers.php',
            data : formData,
            success : function(data) {
                alert(data);
                // 如果需要把返回内容展示在当前表单对应的位置，可改用$currentForm.find('目标选择器')修改
                $('#p').text(data);
            }
        });
    });
});

如果需要区分不同表单的提交逻辑，可给表单增加自定义属性，或者直接判断提交的表单ID、提交按钮的name值即可。

2. 调整PHP参数接收逻辑 #

两个表单分别提交t1和t2参数，同时提交按钮的name值不同，PHP端可根据这两个特征区分请求类型，做对应的业务处理：

// 判断是插入操作还是查询操作
if (isset($_POST['insert'])) {
    // 处理p1表单的插入请求
    $t1 = isset($_POST['t1']) ? $_POST['t1'] : '';
    // 此处编写插入业务逻辑
    echo "插入成功，提交内容：".$t1;
} elseif (isset($_POST['select'])) {
    // 处理p2表单的查询请求
    $t2 = isset($_POST['t2']) ? $_POST['t2'] : '';
    // 此处编写查询业务逻辑
    echo "查询成功，查询内容：".$t2;
} else {
    echo "非法请求";
}

后续扩展说明 #

如果需要新增更多表单，只需要给新表单加上class="t"属性，PHP端对应新增对应请求的处理逻辑即可，不需要修改JavaScript代码。

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