我正在使用循环和数组。我想提交已检查的表行，并在提交下一行之前等待ajax成功。我尝试了一些东西，但没有运气只获得我需要的行。我可能会在php方面对它进行排序，但是我希望以后能够对它进行更正。
这篇文章让我走上了正确的道路：stack: Ajax counter。
JS
<form action="" method="POST" name="postForm">
<table width="200" border="1" cellspacing="1" cellpadding="1">
<tr>
<td><span class="style1">
<input type="checkbox" class="select_all" />
.Select_all </span>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>
<input name="ClickMe" type="button" id="clickMe" value="Submit" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="box" name="row0" />
</td>
<td>
<input value="0-image here" type="text" name="brd" class='item' />
</td>
<td>
<input value="0-title here" type="text" name="mfg" class='item' />
</td>
<td>
<input value="0-Category here" type="text" name="pcat" class='item' />
</td>
<td>
<input value="0-Store cat here" type="text" name="scat" i class='item' />
</td>
<td>
<input value="0-Condition here" type="text" name="cond" class='item' />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="box" name="row1" />
</td>
<td>
<input value="1-image here" type="text" name="brd" class='item' />
</td>
<td>
<input value="1-title here" type="text" name="mfg" class='item' />
</td>
<td>
<input value="1-Category here" type="text" name="pcat" class='item' />
</td>
<td>
<input value="1-Store cat here" type="text" name="scat" i class='item' />
</td>
<td>
<input value="1-Condition here" type="text" name="cond" class='item' />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="box" name="row2" />
</td>
<td>
<input value="2-1mage here" type="text" name="brd" class='item' />
</td>
<td>
<input value="2-title here" type="text" name="mfg" class='item' />
</td>
<td>
<input value="2-Category here" type="text" name="pcat" class='item' />
</td>
<td>
<input value="2-Store cat here" type="text" name="scat" class='item' />
</td>
<td>
<input value="2-Condition here" type="text" name="cond" class='item' />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="box" name="row3" />
</td>
<td>
<input value="3-1mage here" type="text" name="brd" class='item' />
</td>
<td>
<input value="3-title here" type="text" name="mfg" class='item' />
</td>
<td>
<input value="3-Category here" type="text" name="pcat" class='item' />
</td>
<td>
<input value="3-Store cat here" type="text" name="scat" class='item' />
</td>
<td>
<input value="3-Condition here" type="text" name="cond" class='item' />
</td>
</tr>
<td>
<input type="checkbox" class="box" name="row4" />
</td>
<td>
<input value="4-1mage here" type="text" name="brd" class='item' />
</td>
<td>
<input value="4-title here" type="text" name="mfg" class='item' />
</td>
<td>
<input value="4-Category here" type="text" name="pcat" class='item' />
</td>
<td>
<input value="4-Store cat here" type="text" name="scat" class='item' />
</td>
<td>
<input value="4-Condition here" type="text" name="cond" class='item' />
</td>
</tr>
</table>
HTML
{{1}}
答案 0 :(得分：1)
这是使用您的代码（未经测试）的替代方法，该代码使用索引作为计数器。
// your code redone with a counter.
$(document).ready(function () {
//submit boxes
$("#clickMe").click(function () {
var boxes = $("input[type='checkbox' ]:checked");
sendrow(boxes, 0);
});
});
function sendrow(boxes, index) {
if (boxes.length == 0 || index >= boxes.length) {
// no rows checked or all rows processed.
return;
}
var currentRow = $(boxes[index]).closest("tr");
// load data
var data = {};
currentRow.find("input[type='text']").each(function () {
data[this.name] = this.value;
});
//ajax works
$.ajax({
url: "postdata.php",
data: {
data: data
},
type: 'post',
currentProcess: {rows:boxes, currentIndex:index},
success: function (data) {
$('#success').append(data);
var nextIndex = ++this.currentProcess.currentIndex;
var boxes = this.currentProcess.rows;
if (nextIndex < boxes.length) {
sendrow(boxes, nextIndex);
}
}
});
}
答案 1 :(得分：0)
好的，我在我的环境（Visual Studio）中使用了这个，所以我不得不对ajax进行一些调整，但你应该能够将它转换回你的。
基本上，我得到所有被检查的行，然后添加一个类来标记应该处理哪些行。当我发送一行时，我将类更改为处理，完成后，我删除该类并调用sendrow来处理下一行。
另外，请注意我如何将请求中的行传递给success函数以删除处理类。
我添加了一个名为“status”的单元格，因此我可以证明它已经打到服务器中。
$(document).ready(function () {
//submit boxes
$("#clickMe").click(function () {
var boxes = $("input[class='box' ]:checked");
// add class to see what has to be processed
boxes.closest("tr").addClass("waiting");
sendrow();
});
});
// process rows
function sendrow() {
var boxes = $(".waiting");
if (boxes.length == 0) {
// we are done
return;
}
var $row = $(boxes[0]);
$row.removeClass("waiting").addClass("processing");
var row = $row.html();
//ajax works
$.ajax({
url: "WebService1.asmx/GetADate",
data: JSON.stringify( {s:row}),
type: 'post',
contentType: "application/json; charset=utf-8",
dataType: "json",
rowprocessed:{ arow:$row},
success: function (data, status) {
var rp = this.rowprocessed.arow;
rp.find("[name='status']").val(data.d);
rp.removeClass('processing')
sendrow();
},
error: function (one, two) {
debugger;
}
});
}