jquery ajax，发送具有相同ID的几行信息

Question

我在窗体中有一个html表。

此表充满了我的数据库中的信息。 这是表的样子：

<table> 
<tr> 
<td >Number</td> 
<td >Name</td> 
<td >Last Name</td> 
</tr> 
<tr> 
<td> <input type="hidden" id="number" value="1">1</td> 
<td> <input type="hidden" id="name" value="John">John</td> 
<td> <input type="hidden" id="last" value="Snow">Snow</td> 
</tr> 
<tr> 
<td> <input type="hidden" id="number" value="2">2</td> 
<td> <input type="hidden" id="name" value="Jean">Jean</td> 
<td> <input type="hidden" id="last" value="Dow">Dow</td> 
</tr> 
. 
. 
</table> 

表有行数取决于行数据库抛出的数量。

如果信息正确，用户将点击表单的提交按钮。

提交按钮将它带到一个js文件中的函数。从那里，我需要获取表格的值并将它们发送到一个php文件。

为了实现这个目标，在函数内部，在js文件我做：

var sNumber = $("# number ").val(); 
var sName = $("#name").val(); 
    var sLast = $("#last").val(); 
    params = ''; 
    params += '&number='+sNumber; 
    params += '&name='+sName; 
    params += '&last='+sLast; 
    theUrl = 'controller.php'; 
    $.ajax ({ 
     url: theUrl, 
     data: params, 
     async:false, 
     success: function (data, textStatus) 
     {    
     } 
    }); 

但作为表中的行的ID是相同的，我只得到了第一行的信息。

任何人都可以请帮我把表中的所有信息发送到php文件吗？

非常感谢

Answer 1

使用类所需的所有数据，并做如下：

var listName = []; 
$(".name").each(function(){ 
    listNames.push($(this).val()); 
    alert($(this).val()); 
})​ 

Answer 2

的id必须在页面上独一无二的。使用class代替id

时，你有没有更多的双ID在您的网页，看看在jQuery each()功能，让你的Ajax调用

Answer 3

id元素的属性必须是唯一的。 使用一个班级。使用jQuery来查看与类匹配的集合。

您可以在GET和POST中多次发送相同的变量。

params = ''; 
$(".name").each(function(){ 
    var sName = $(this).val(); 
    params += '&name='+sName; 
}); 
//similar for number and last 

theUrl = 'controller.php'; 
$.ajax ({ 
     url: theUrl, 
     data: params, 
     async:false, 
     success: function (data, textStatus) 
     {    
     } 
    }); 

Answer 4

ID应该永远不会相同。每个ID只能有一个给定项目的项目。也就是说，如果你想拥有类似功能的物品，你应该使用类。也就是说，你可能还想要包含name属性。

如果你真的想与IDS的工作，你应该标记它更像

<table id="users"> 
<tr> 
<td >Number</td> 
<td >Name</td> 
<td >Last Name</td> 
</tr> 
<tr class="someclass"> 
<td> <input type="hidden" name="number" id="number-1" value="1">1</td> 
<td> <input type="hidden" name="name" id="name-1" value="John">John</td> 
<td> <input type="hidden" name="last" id="last-1" value="Snow">Snow</td> 
</tr> 
<tr class="someclass"> 
<td> <input type="hidden" name="number" id="number-2" value="2">2</td> 
<td> <input type="hidden" name="name" id="name-2" value="Jean">Jean</td> 
<td> <input type="hidden" name="last" id="last-2" value="Dow">Dow</td> 
</tr> 
. 
. 
</table> 

和JavaScript应该像

//get the table and iterate over every row 
$('table').find('.someclass').each(function(){ 
    //get each inputs name and value 
    var somevar = $(this) 
    var number = somevar.find('[name=number]').val() 
    var name = somevar.find('[name=name]').val() 
    var last = somevar.find('[name=last]').val() 
    //Do something with these 
}); 

一些其他的东西，你能做的只是简单地使用jQuery.post()。因此，对提交你会做

//serialze the form and submit it. 
$.post("controller.php", $('form').serialize(), 
    function(data) { 
    //handle the response 
    alert("Data Loaded: " + data); 
    } 
); 

对于这个工作，你需要使用number[]，name[]和last[]作为输入名字，他们得到存储为一个数组。