ajax - 列表项的页面加载时的 AJAX 调用

Question

目前，我在 JQuery Mobile 环境中有一个项目列表 ( <ul><li>item</li>...</ul>)。现在我想显示列表中每个项目的附加信息，因为所需的信息可能需要一些时间才能获取，我正在寻找一种方法，当页面加载时，每个项目都会发送 AJAX 请求，同时这样做微调器显示为占位符。当显示 AJAX 调用的结果时，图标应该代替微调器

关于如何实现这一目标的任何建议？

Answer 1

在您的列表中，您可以添加data-attributes到列表项以存储 ID 或用于识别您将为特定列表项获取的数据的任何内容：

<ul data-role="listview" id="my-listview">
    <li data-id="3348"><img src="/css/images/loading.gif" /></li>
</ul>

请注意，如果您使用 jQuery Mobile 加载微调器的 GIF 版本，它会自行生成动画。

然后您可以使用每个 AJAX 请求的回调函数将数据添加到每个列表项：

//cache all list-items
var $listItems = $('#my-listview').children();

//loop through each list-item
$.each($listItems, function (index, element) {

    //cache this specific list-item for later use (in the callback)
    var $listItem = $listItems.eq(index);
    $.ajax({
        url     : 'some-script.php',
        data    : { id : $(this).attr('data-id') },
        type    : 'post',
        success : function (response) {

            //if the server returns valid HTML, we can just append it to the list-item
            $listItem.find('img').replaceWith(response);
        },
        error   : function (jqXHR, textStatus, errorThrown) {
            /*Don't forget to handle errors*/
            $listItem.find('img').replaceWith('<span>An error occured, please try again later.</span>');
        }
    });
});