jQuery Loader处理Ajax请求

jQuery Loader on a Ajax request

本文关键字：请求 Ajax 处理 Loader jQuery      更新时间：2023-09-26

我正在Node中创建一个应用程序，它在我的Schema（Mongo）中提取对象并以HTML形式呈现它们。好的，到目前为止还可以。

现在我需要创建一个jQuery加载程序，它具有这样的图片，而对象不会出现在html->中https://i.stack.imgur.com/kQc8d.gif而数据不出现。

$.ajax({
    type: 'GET',
    url: host + '/datas',
    success:function(datas) {
        datas.forEach (function (data) {
            var HTML = [];
            HTML.push('<tr class="datas">');
            HTML.push('<td>' + data.email + '</td>');
            HTML.push('<td>' + name.email + '</td>');
            reservasHTML.push('</tr>');
            $('tbody').append(reservasHTML.join(''));
        })
    }
});

我该怎么做？

$.ajax({
    $(".datas").empty().html('<img src="http://i.imgur.com/hq37Dew.gif" />'); // SHOW THE AJAX LOADER
    type: 'GET',
    url: host + '/datas',
   success:function(datas){
        $(".datas").html(datas); // this will hide the loader and replace it with the data                            
        datas.forEach (function (data) {
            var HTML = [];
            HTML.push('<tr class="datas">');
            HTML.push('<td>' + data.email + '</td>');
            HTML.push('<td>' + name.email + '</td>');
            reservasHTML.push('</tr>');
            $('tbody').append(reservasHTML.join(''));
        })
   }
});

我想就是这样。

假设给图像一个id为image_id，

$.ajax({
    type: 'GET',
    url: host + '/datas',
    beforeSend: function(){
    // Code to show the image . e.g.
     $('#image_id').show();
    },
    success:function(datas) {
    // Code to hide image again / completely make it display-none
    $('#image_id').hide // or $('#image_id').css("display","none");
        reservas.forEach (function (data) {
     //   ........
        })
    }
});

$.ajax({
    type: 'GET',
    url: host + '/datas',
    beforeSend: function() {
    // Add loader here
        $(placeholder).addClass('loading');
    },
   complete: function() {
    //hide loader here/
        $(placeholder).removeClass('loading');
    },
   success:function(datas){
        datas.forEach (function (data) {
            var HTML = [];
            HTML.push('<tr class="datas">');
            HTML.push('<td>' + data.email + '</td>');
            HTML.push('<td>' + name.email + '</td>');
            reservasHTML.push('</tr>');
            $('tbody').append(reservasHTML.join(''));
        })
   }
});

希望这能起作用

相关文章：