我正在编写一个脚本,该脚本应该遍历用户表(见下文),包含用户 ID,并发出一堆 API 请求,这些请求将使用有关这些用户的任意元数据更新在线客户端数据库。
这是表格:
<table id="msisdns_to_process">
<tr class="header">
<th>phone</th>
<th>First</th>
<th>Last</th>
<th>Favorite Book</th>
</tr>
<tr subid="4e8d1d81e89f75ffc1fd71b1">
<td class="unprocessed" mdid="4eb838400cf2384c4bd32ba5">18005882300</td>
<td class="unprocessed" mdid="4eb838400cf2384b3ac22ba5">Quentin</td>
<td class="unprocessed" mdid="4eb838480cf2384b3ac22ba6">Tarantino</td>
<td class="unprocessed" mdid="4ef3c054696e84d9342c46c1">Naked Lunch</td>
</tr>
<tr subid="4e8d92560cf24f1d7e67de28">
<td class="unprocessed" mdid="4eb838400cf2384c4bd32ba5">18005882300</td>
<td class="unprocessed" mdid="4eb838400cf2384b3ac22ba5">Wes</td>
<td class="unprocessed" mdid="4eb838480cf2384b3ac22ba6">Anderson</td>
<td class="unprocessed" mdid="4ef3c054696e84d9342c46c1">The Ticket That Exploded</td>
</tr>
<tr subid="4e8eacac2d6afa11cbdece8a">
<td class="unprocessed" mdid="4eb838400cf2384c4bd32ba5">18005882300</td>
<td class="unprocessed" mdid="4eb838400cf2384b3ac22ba5">David</td>
<td class="unprocessed" mdid="4eb838480cf2384b3ac22ba6">Cronenberg</td>
<td class="unprocessed" mdid="4ef3c054696e84d9342c46c1">Junky</td>
</tr>
</table>
所以我需要做的是按下一个按钮,它将迭代所有非标题单元格,进行一个 API 调用,使用该行的 subid 属性、单元格的 mdid 属性和细胞。像这样的东西:
http://api.foo.bar/update/[subid]
POST payload: {"id":"[mdid]","value":"[cell text]"}
我对 jQuery 还很陌生,所以我可能在使用正确的选择器时遇到困难,但这就是我所拥有的:
$("button#process_md").click(function(){
$("table#msisdns_to_process tr").each(function(){
var subid = this.attr("subid");
$("td.unprocessed").each(function(){
var mdid = this.attr("mdid");
var cont = this.contents();
$.ajax("/update"+subid,
{
data: { 'id': mdid,
'value':cont
},
headers: {'Accept': 'application/json'},
type: 'POST',
statusCode: {
200: function() {
$(this).addClass("processed");
$(this).removeClass("unprocessed");
}
}
}
});
});
...但我没有得到任何结果。我再次认为我的选择或迭代是错误的。有什么想法吗?
最佳答案
您的代码中存在一些常见错误。
1) 当“this”实际上是一个 DOM 元素时,您将其视为 jQuery 对象。所以这个:
var mdid = this.attr("mdid");
应该是:
var mdid = $(this).attr("mdid");
2) 您无法将 '$(selector).contents()' 作为参数传递给 ajax 调用,因为它会引发异常。你的意思可能是
$(selector).text()
3) 除非您显式使用 jQuery 代理函数,否则关键字“this”不会通过回调函数保留。因此成功的函数不会有正确的“this”范围。请参阅下面代码中的 $.proxy。
下面的代码已重新格式化,以便稍微更清晰。
function setProcessed(data){
$(this).addClass("processed");
$(this).removeClass("unprocessed");
}
function processRow(){
var subid = $(this).attr("subid");
try{
$(this).find("td.unprocessed").each(function(){
var mdid = $(this).attr("mdid");
var cont = $(this).text();
var params = {};
params.id = mdid;
params.value = cont;
$.ajax({
url: "/update" + subid,
data: params,
type: 'POST',
success:$.proxy(this, setProcessed),
});
});
}
catch(error){
alert("error caught in processRow: " + error);
}
}
function processTable(){
$("table#msisdns_to_process tr").each(processRow);
}
$("button#process_md").click(processTable);
但是我应该注意,使用这种方法您的页面几乎肯定不会像您希望的那样工作。基本上,大多数浏览器一次只会打开两个到服务器的连接,因此 Ajax 请求将大量排队和延迟,甚至可能超时。
您最好找到大量需要处理到服务器的行,将它们全部传递到一个请求中,然后在请求中取回数据。
关于jquery - 对表元素的重复 ajax 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10827597/