首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在ajax中通过加载逐个显示数据

如何在ajax中通过加载逐个显示数据
EN

Stack Overflow用户
提问于 2018-05-28 12:38:26
回答 1查看 86关注 0票数 0

我在数据库中有100个数据,我将在div上显示这些数据,但这些数据是逐个显示的,因为如果同时显示,会感觉滞后

这是我用来获取和显示数据的ajax

代码语言:javascript
复制
$.ajax({ type: "POST", url: site_url, data: {
        limit: limit,
        get_produk: mobile_form
    }, dataType: "json", timeout: 60000, success: function(data) {
       var data_produk = data.produk;
       var list_produk = '';
         for (var i = 0, len = data_produk.length; i < len; i++) {
                      list_produk += '<div class="wrapproduk goto_detil addproduk_'+data_produk[i].id+'">';
                        list_produk += filter;
                            list_produk += '<div class="wraptopproduk" '+addonclick+'>';
                                list_produk += '<div class="imgproduk" style="background-image:url('+global_url+''+data_produk[i].image+');"></div>';
                                list_produk += '<div class="titleproduk">'+data_produk[i].trim_title+'</div>';
                                list_produk += '<div class="priceproduk">'+format_angka(data_produk[i].harga)+'</div>';
                            list_produk += '</div>';
                            list_produk += '<div class="produk_pay_button '+add_grey+' produk_limit_'+data_produk[i].id+'" id="produk_limit_'+data_produk[i].id+'">';
                                list_produk += '<div class="btn_addtocart btn_ripple prod_front" id="add_front" '+addcart+'>'+lang.btn_details+'</div>';
                                list_produk += '<div class="addmin">';
                                    list_produk += '<button class="btn_addtocart btn_ripple prod_minus prod_inline" id="prod_minus" onClick="btn_minus_cartfront(\''+data_produk[i].id+'\')"><img src="img/minus.png" width="20"></button>';
                                    list_produk += '<input type="text" value="0" id="val_prod_'+data_produk[i].id+'" class="prod_inline val_prod_'+data_produk[i].id+' ">';
                                    list_produk += '<button class="btn_addtocart btn_ripple prod_plus prod_inline" id="prod_plus" onClick="btn_plus_cartfront(\''+data_produk[i].id+'\')"><img src="img/plus.png" width="20"></button>';
                                list_produk += '</div>';
                            list_produk += '</div>';
                                list_produk += '<input type="hidden" value=\''+ JSON.stringify(data_produk[i]) +'\' id="dataproduk_'+data_produk[i].id+'">';
                        list_produk += '</div>';


           $('#content_newproduk').html(list_produk);
        }
   }
});

如何通过动画和加载将数据逐一显示到#content_newproduk中

EN

回答 1

Stack Overflow用户

发布于 2018-05-28 14:05:09

您必须逐个从服务器获取数据。在上面的代码中,您需要修改url: site_url,以便它一次返回一条记录,假设是基于您传递的ID。然后,您必须在循环中调用该方法。

但是,由于这些调用将是异步的和独立的,您可能会在UI上遇到顺序问题。所以你需要考虑以下几点: 1.顺序对你很重要吗? 2.你需要跟踪发送的请求,例如requestCount,然后适当地增加和减少它。3.根据请求数维护加载器的状态。

注:基于您提到的情况,我认为分批获取数据比逐个获取数据更好。根据性能或您的需求,批量获取数据(参考服务器端分页),然后显示它们。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50559198

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档