javascript - 如何在 div 中显示结果然后异步更新它们

Question

我创建了一个网络服务来帮助查询维基百科页面，这是一种不同的搜索。我的搜索服务返回页面链接给我。我能够检索它并将其显示在一个 div 中。我的问题是，如何在链接到达后立即显示链接，然后对维基百科进行异步调用以获取页面的缩略图和基本描述，并用格式化的缩略图和描述替换之前发布的结果。

比如twitter就是这样做的

<blockquote class="twitter-tweet">
  <p>Loading tweet ' + tweet.id  + '</p>
  <a href="https://twitter.com/'+ tweet.uname + '/status/' + tweet.id +'"></a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

首先执行此操作仅在页面上显示推文 ID，然后一旦收到来自推特的回复，它就会成为嵌入式推文。

Answer 1

对于您的服务返回的结果中的每个 url:

1. 显示 url(包装在 HTML 元素中)
2. 请求详细信息并在详细信息到达时更新元素

半伪代码示例:

// query your service and get article urls
$.getJSON(web_service_url, { // AJAX call
        query: query
    }, function(response) {
        // reset search results
        $('#results').html('');

        // iterate through article urls and for each url...
        $.each(response.urls, function(i, url) {
                // 1.) show it
                var item_element = $('#results').append('<div>' + url + '</div>');

                // 2.) query wikipedia for details...
                $.getJSON(wikipedia_article_details_url, { // AJAX call
                    url: url
                }, function(response) {
                    // 2.1) and replace the url with the details when they arrive
                    item_element.html(response.details);
                });
            }
        });