javascript - each、ajax、promise 并以正确的方式设置 html

Question

在(动态生成的)表中，我搜索并找到名为“VATNumber”的列，并使用值(增值税号)作为 ajax 调用的参数，迭代该列的所有(非标题)单元格。

表格和按钮:

<table id="ResultData">
    <tbody>
        <tr>
            <th>ID</th><th>Amount</th><th>VATNumber</th><th>Country</th>
        </tr><tr>
            <td>1</td><td>10000.00</td><td>DE123456789</td><td>BE</td>
        </tr><tr>
            <td>2</td><td>20000.00</td><td>NL000123456B01</td><td>BE</td>
        </tr><tr>
            <td>3</td><td>30000.00</td><td>NL001234567B01</td><td>BE</td>
        </tr><tr>
            <td>4</td><td>40000.00</td><td>NL002345678B01</td><td>BE</td>
        </tr>
    </tbody>
</table>

<p>
    <button id="btnVIESCheck">CHECK</button>
</p>

这或多或少是使用(讨厌的)同步ajax(术语上的矛盾)的代码

$('#btnVIESCheck').on('click', function (e) {
    e.preventDefault();
    var columnIndex = $('#ResultData th:contains("VATNumber")').index();
    $('#ResultData tr:gt(0) td:nth-child(' + (columnIndex + 1) + ')')
      .each(function () {
        $this = $(this);
        var vatnr = $this.text(),
            rowIndex = $this.closest('tr').index();

        //add ajaxloader
        $this.html($this.html() + ' ' + ajaxloader);

        var resultCode = checkVATNr(vatnr),
            img = '';

        switch (resultCode) {
            case '1':
                img = '<img src="Img/ok.jpg" />';
                break;
            case '2':
                img = '<img src="Img/notok.jpg" />';
                break;
            case '3':
                img = '<img src="Img/warning.jpg" />';
                break;
            default:
                break;
        }

        $this.html(vatnr + ' ' + img);
    });
});

function checkVATNr(vatnr) {
    var result = '';

    $.ajax({
        type: "POST",
        async: false,
        url: 'MyWebService.asmx/CheckVATNumber',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        data: JSON.stringify({
            'vatnr': vatnr
        }),
        success: function (msg) {
            var xml = $.parseXML(msg.d);
            $xml = $(xml);
            result = $xml.find('ResultCode').text();
        },
        error: function (e) {
            console.log("Error " + e.error);
        }
    });

    return result;
}

当然

• 这显示所有调用完成后的图像。不太好，表格可能会很大
• 我想在 .each() 中使用正确的异步 ajax，但有时结果会出现乱码、无序、替换错误的表格单元格，有时它只适用于最后一个单元格。

如何使用 Promise 来编写此内容？

Answer 1

一个问题是在每个循环中使用全局变量$this，这将导致$this始终引用最后一个td 元素。因此，使用将其定义为局部变量，例如 var $this = $(this);

这是因为使用了async:false，它会阻止浏览器线程执行任何操作，直到所有 ajax 请求完成为止。

使用回调机制来处理请求，例如

$('#btnVIESCheck').on('click', function (e) {
    e.preventDefault();
    var columnIndex = $('#ResultData th:contains("VATNumber")').index();
    $('#ResultData tr:gt(0) td:nth-child(' + (columnIndex + 1) + ')')
        .each(function () {
        var $this = $(this);
        var vatnr = $this.text(),
            rowIndex = $this.closest('tr').index();

        //add ajaxloader
        $this.html($this.html() + ' ' + ajaxloader);

        checkVATNr(vatnr, function (resultCode) {
            var img = '';
            switch (resultCode) {
                case '1':
                    img = '<img src="Img/ok.jpg" />';
                    break;
                case '2':
                    img = '<img src="Img/notok.jpg" />';
                    break;
                case '3':
                    img = '<img src="Img/warning.jpg" />';
                    break;
                default:
                    break;
            }

            $this.html(vatnr + ' ' + img);
        })

    });
});

function checkVATNr(vatnr, callback) {
    $.ajax({
        type: "POST",
        url: 'MyWebService.asmx/CheckVATNumber',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        data: JSON.stringify({
            'vatnr': vatnr
        }),
        success: function (msg) {
            var xml = $.parseXML(msg.d);
            $xml = $(xml);
            callback($xml.find('ResultCode').text());
        },
        error: function (e) {
            console.log("Error " + e.error);
            callback('');
        }
    });
}

另请参阅:How do I return the response from an asynchronous call?