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[]作爲輸入名字，他們得到存儲爲一個數組。