使用ajax在指定位置插入html

时间:2019-04-14 12:58:05

标签: javascript ajax

向下滚动30%或到达特定位置时 您要在指定位置插入html文档。

下面是当滚动大约30%且要插入html时运行的ajax。

html

<!-- Number 1 -->
    <div class="anyDiv off" data-ajax="/html/ajax/number_1.html"></div>
<!-- //Number 1 -->

<!-- Number 2 -->
    <div class="anyDiv off" data-ajax="/html/ajax/number_2.html"></div>
<!-- //Number 2 -->

javascript

$(function(){
  $(window).scroll(function(e){
    var bodyHeight = $('body').height();
    var scrollTop = $(this).scrollTop()+$(window).height();
    var per = Math.ceil((scrollTop/bodyHeight)*100);

    if( per >= 30 ){
      $('.anyDiv.off').each(function(){
        var pop_ax = $(this);
        var load_url = $(this).data('ajax');

        $(this).removeClass('off');

        $.ajax({
          url:load_url,
          type:'get',
          dataType : 'html',
          success:function(data){
            pop_ax.append($("<div class='remove'/>").html(data).find('.loadhtml').html());
          }
        });

        return false;
      });
    }
    return false;
  });
});

[number_1.html]

<div class="loadhtml">
    <div ax="main">
        <div class="bg-grey">            
            <h2 class="main-letter"><strong>#Number1</strong></h2>
        </div>
    </div>
</div>

[number_2.html]

<div class="loadhtml">
    <div ax="main">
        <div class="bg-grey">            
            <h2 class="main-letter"><strong>#Number2</strong></h2>
        </div>
    </div>
</div>

我想知道您是否可以使用上述的ajax更快地拨打number_1.html和number_2.html。

或者,我们可以依次调用number_1.html> number_2.html吗?

注意:number_1.html,number_2.html包含动态数据。

0 个答案:

没有答案