Question

我正在编写一个脚本，该脚本应该覆盖用户的表（见下文），并附带用户ID，并制作一堆API请求，这些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");
                                }

                            }
                        }
        });     
});

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

Answer 1

尝试用下面的代码替换代码后，我修复了一些选择器，这些选择器是使代码工作所必需的。

$(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 

            });
        });

    });

});

建议使用调试器（firebug，chrome）来查看代码是否正常工作，可以使用alert和console.log（）来查看代码是否正常工作。

Answer 2

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

1）当它实际上是一个DOM元素时，你将'this'视为一个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请求将大量排队和延迟，可能超出它们的时间。

您最好找到需要处理服务器的大量行，在一个请求中传递所有行，然后在请求中恢复数据。

重复的ajax请求表元素

2 个答案: