2

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

                            }
                        }
        });     
});

...但我没有得到任何结果。我想，再一次，我做错了选择或迭代。有什么想法吗？

4

2 回答 2

0

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

$(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）来查看你的代码是否工作，你可以使用alerts和console.log()来查看你的代码是否工作。

于 2012-05-31T06:55:25.183 回答
0

您的代码中有几个一般错误。

1) 当它实际上是一个 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 请求将被大量排队和延迟，可能会超时。

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

于 2012-05-31T07:13:04.050 回答