循环生成多个同名表单，Ajax提交时识别对应表单的更优方案

嘿，我看到你现在的问题是循环生成了多个表单，目前靠给表单名称拼接索引来区分，但想找更简便的方案对吧？其实不用给每个表单加独特ID/名称，利用jQuery的DOM关系或者数据属性就能轻松解决，下面给你几个实用的方法：

方法1：利用DOM层级关系获取当前按钮所属表单 #

这是最直接的方案，因为你的点击按钮$('.plato')是嵌套在对应的表单里的，所以可以通过closest()方法直接找到它所在的表单，不用修改PHP生成的表单结构，只需要修改ajax.js的代码：

修改后的ajax.js：

$(document).on('ready',function(){
    $('.plato').click(function(){
        var url = "anadirCarrito.php";
        // 获取当前点击按钮所属的表单
        var $currentForm = $(this).closest('form');
        $.ajax({
            type: "POST",
            url: url,
            // 序列化当前表单的数据
            data: $currentForm.serialize(),
            success: function(data) {
                $('#carrito').html(data);
            }
        });
    });
});

这里要提一句：HTML规范里要求ID是唯一的，你现在给所有表单都用id='platos'其实不符合规范，建议把表单的id去掉，或者改成class='platos'，不过上面的代码即使保留重复ID也能正常工作。

方法2：给表单添加自定义数据属性（适合需要额外标识的场景） #

如果你不仅需要序列化表单数据，还想知道具体是第几个表单被提交，可以在PHP生成表单的时候给每个表单加一个data-index属性，不用修改表单名称：

先给menus.php的循环加索引变量并修改表单代码：

<?php 
$i = 0; // 新增索引变量
while (!feof($id_fichero2)) { 
    echo("<form method='post' data-index='{$i}'>"); // 添加data-index属性
    if(($linea2=trim(fgets($id_fichero2,256),"\n\r"))!=false) { 
        echo("<button type='button' name='plato' class='plato'>" .$linea2. "</button><br>"); 
        echo("<input type='hidden' name='nombrePlato' value='" .$linea2. "'>"); 
    } 
    echo("</form>"); 
    $i++; // 索引自增
} 
?>

然后在ajax.js里可以获取这个索引，同时序列化表单：

$(document).on('ready',function(){
    $('.plato').click(function(){
        var url = "anadirCarrito.php";
        var $currentForm = $(this).closest('form');
        var formIndex = $currentForm.data('index'); // 获取表单索引
        console.log("提交的是第" + formIndex + "个表单"); // 可选：打印索引用于调试
        $.ajax({
            type: "POST",
            url: url,
            data: $currentForm.serialize(),
            success: function(data) {
                $('#carrito').html(data);
            }
        });
    });
});

方法3：简化结构——不用多个表单，用数据属性传递菜品信息 #

其实你每个表单里只有一个隐藏域和按钮，完全可以去掉多余的表单，把所有按钮放在同一个容器里，给每个按钮加data-plato属性来传递菜品名称，这样DOM结构更简洁：

修改menus.php的相关部分：

// 去掉循环里的<form>标签，换成一个容器
echo("<div class='platos-container'>"); 
while (!feof($id_fichero2)) { 
    if(($linea2=trim(fgets($id_fichero2,256),"\n\r"))!=false) { 
        // 给按钮加data-plato属性存储菜品名称
        echo("<button type='button' class='plato' data-plato='" .$linea2. "'>" .$linea2. "</button><br>"); 
    } 
} 
echo("</div>");

然后修改ajax.js，直接用按钮的data属性构造提交数据：

$(document).on('ready',function(){
    $('.plato').click(function(){
        var url = "anadirCarrito.php";
        var platoName = $(this).data('plato'); // 获取菜品名称
        $.ajax({
            type: "POST",
            url: url,
            // 构造要提交的数据
            data: { nombrePlato: platoName },
            success: function(data) {
                $('#carrito').html(data);
            }
        });
    });
});

这个方案更轻量化，减少了不必要的表单元素，代码也更简洁。

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