jquery - 对表元素的重复 ajax 请求

Question

我正在编写一个脚本，该脚本应该遍历用户表(见下文)，包含用户 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");
                                }

                            }
                        }
        });     
});

...但我没有得到任何结果。我再次认为我的选择或迭代是错误的。有什么想法吗？

Answer 1

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

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 请求将大量排队和延迟，甚至可能超时。

您最好找到大量需要处理到服务器的行，将它们全部传递到一个请求中，然后在请求中取回数据。