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>');
        }
    });
});

AJAX调用页面加载列表项

1 个答案: