对表元素的重复ajax请求

Question

我正在处理一个脚本，该脚本应该会遍历用户的表（请参见下文），并附有用户标识，并制作一组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> 

所以我需要做的是有一个按钮，按下会遍历所有的非头细胞，使得使用该行随后的子ID属性的API调用，单元格的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"); 
           } 

          } 
         } 
     });  
}); 

...但我没有结果。我想，再次，我正在做选择或迭代错误。有什么想法吗？

Answer 1

您的代码中存在一些常见错误。

1）您将'this'视为一个jQuery对象，当它实际上是一个DOM元素时。所以这个：

var mdid = this.attr("mdid"); 

应该是：

var mdid = $(this).attr("mdid"); 

2）您无法通过在“$（选择）.contents（）作为参数传递给Ajax调用，它抛出一个异常。你可能意味着

$(selector).text() 

3）关键字“这个”不通过回调函数保存，除非你明确地使用jQuery的代理功能。所以成功的功能不会有'这个'的正确范围。请参阅下面的代码中的$ .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请求将被大量排队和延迟，可能会超时。

找到需要处理到服务器的大量行，将所有行传递给一个请求，然后再根据请求返回，会更好。

Answer 2

用下面的代码替换你的代码后尝试，我已经修复了使代码工作所需的几个选择器。

$(document).ready(function() { 

    $("button#process_md").click(function() { 
     $("table#msisdns_to_process tr[subid]").each(function() { 
      var subid = $(this).attr("subid"); 
      $("td.unprocessed").each(function() { 
       var mdid = $(this).attr("mdid"); 
       var cont = $(this).html(); 
       //Ajax call go here 

      }); 
     }); 

    }); 

}); 

建议使用调试器（萤火虫，铬），看看你的代码工作，你可以使用警报和执行console.log（），看看你的代码工作。