Question

我创建了一个Web服务，可帮助查询维基百科页面，这是一种不同类型的搜索。我的搜索服务返回给我的页面链接。我能够检索它并在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，然后一旦它从Twitter上回来，它就会成为嵌入式推文。

Answer 1

对于您的服务返回的结果中的每个网址：

显示网址（包含在HTML元素中）
要求提供详细信息并在详细信息到达时更新元素

半伪代码示例：

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

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

1 个答案: