如何使用单独的ajax调用使页面的一部分完全响应而其他部分仍在加载?

时间:2016-05-11 20:36:58

标签: javascript jquery json ajax knockout.js

我们有一个机密网站。我试图使用以下小提琴制作最小版本:this is how basic website looks

当然,我们还有更多的列表和控件。问题是所有这些数据 -  1. json填充所有Dropbox(实际上我们有10个)  2. json填充上市数据

这两个来自一个api。因此页面加载速度太慢。

如果我们通过不同的api提供这两个数据,请说 - “过滤器api”填充组合框和“listing api”来填充列表。

是否可以首先列出列表并完全绑定它们,并使列表部分(按钮,链接)完全响应。在后台放置第二个api调用来从过滤器api中获取数据。

<p>
Below are three filters as combo box which too have large data in each combo box. This is called through api.
</p>

<select>
  <option value="volvo">Filter12</option>
  <option value="saab">Filter22</option>
  <option value="opel">Filter23</option>
  <option value="audi">Filter24</option>
</select>

<div>
<li>1st listing: This is demo - acutal listing has many elements and listing data comes through api and binded by knockout</li>

1 个答案:

答案 0 :(得分:0)

如果您想将当前的AJAX调用分成两部分,那么链接它们才有意义。如果你同时加载这两个,你真的不知道哪一个会先完成 - 而且我猜你希望列表首先回来 - 如果你不能过滤,那么填充过滤器的用途是什么与他们的任何数据。

使用简单JQuery的一个简单示例将链接2个AJAX调用:

var filtersCall = function() {
    return $.get('/some/api');
}

var listingsCall = function() {
    return $.get('get/data/api');
}

var populatePage = function() {
    listingsCall()
        .then(function(data) {
            // populate listings
            // e.g. ko.mapping.fromJS(data, {}, self.listings)
            // right now user can see all listings, and you can 
            // begin fetching filter data that you need via filtersCall() 

            return filtersCall()
                .then(function(result) {

                    // populate your filters
                    // e.g. ko.mapping.fromJS(results, {}, self.filters);

                  });
        })
}