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>

したがって、ヘッダー以外のすべてのセルを反復処理するボタンを押して、行の subid 属性、セルの mdid 属性、およびセルの値を使用する API 呼び出しを行う必要があります。何かのようなもの：

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

コードにはいくつかの一般的なエラーがあります。

1）実際にはDOM要素である場合、「this」をjQueryオブジェクトとして扱っています。したがって、この：

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

する必要があります：

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

2）例外をスローするため、ajax呼び出しにパラメーターとして「$（selector）.contents（）」を渡すことはできません。あなたはおそらく意味しました

$(selector).text()

3）キーワード'this'は、jQueryプロキシ関数を明示的に使用しない限り、コールバック関数を介して保持されません。したがって、成功するための関数には、「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);

ただし、このアプローチを使用した場合とは異なり、ページがほぼ確実に機能しないことに注意してください。基本的に、ほとんどのブラウザーはサーバーに対して一度に2つの接続しか開いていないため、Ajaxリクエストは大量にキューに入れられ、遅延する可能性があり、タイムアウトする可能性があります。

サーバーへの処理が必要なかなりの数の行を見つけて、それらすべてを1つのリクエストに渡してから、データをリクエストに戻す方がはるかに良いでしょう。

于 2012-05-31T07:13:04.050 に答える
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) を使用して、コードが機能しているかどうかを確認することをお勧めします。アラートと console.log() を使用して、コードが機能しているかどうかを確認できます。

于 2012-05-31T06:55:25.183 に答える