标签： ajax

全局事件ajaxStart、ajaxStop不执行

最近一直都在研究【锋利的jQuery】，确实是一本好书，受益匪浅。但由于技术发展及版本更新等原因，里面还是有些坑需要踩的。

比如：第六章七节中提到的全局事件ajaxStart、ajaxStop照着案例敲结果并不会执行。

在查阅资料后，发现原来在jquery1.9+版本以后，ajax全局事件需绑定到document对象上才能触发。

下面是各版本不同写法： 阅读详细 »

页面滚动到底部 ajax加载内容代码 示例代码

页面滚动到底部 ajax加载内容代码：

html结构： 

    <div class="ipshowListA">
        <ul class="clearfix">
        <!--<li class="item">内容块</li>-->
        </ul>
    </div>
    
    <div class="pagesA">
        <div class="more" data-url = "jsonlist.php?page=1" >点击加载更多</div>
        <div class="loading"><!--数据加载中...--></div>
        <div class="nodata">没有更多数据了...</div>
    </div>

js代码： 

// JavaScript Document
$(function(){
    
    var $btn_more    = $('.pagesA .more');//更多按钮
    var $btn_loading = $('.pagesA .loading');//载入中
    var $btn_nodata  = $('.pagesA .nodata');//没有数据了
    var $box         = $('.ipshowListA ul');//容器
    var lock = false;
    var nexturl =  $btn_more.data('url');//第一次url
    
    function _more(){
        $btn_more.show();
        $btn_loading.hide();
        $btn_nodata.hide();
    }
    function _loading(){
        $btn_more.hide();
        $btn_loading.show();
        $btn_nodata.hide();
    }
    function _nodata(){
        $btn_more.hide();
        $btn_loading.hide();
        $btn_nodata.show();
    }
    //点击触发 （ajax加载数据）
    $btn_more.on('click',function(){
        ajaxLoad();                       
    });
    //距离底部300触发  （ajax加载数据）
    $(window).on('scroll',function(){
        if( $(document).height() - $(window).scrollTop() - $(window).height() < 300 ){
            ajaxLoad(); 
        }                    
    })
    
    
    //ajax加载数据
    function ajaxLoad(){
        //锁
        if( lock ){return false; }else{ lock = true; }
        _loading();
        $.ajax({
            url:nexturl,
            type:'get',
            dataType:'json',
            success:function(d){
                //{"error":0 , "msg":"ok" , "html":"6666", "nexturl":"jsonlist.php?page=1"} 
                if(d.error == 0 ){
                    //加载成功
                    $box.append( d.html );
                    lock = false;
                    _more();
                    nexturl = d.nexturl; //更新下一页地址
                }else if(d.error == 1 ){
                    //没有数据了
                    _nodata();
                    
                }else{
                    //其他错误
                    alert( d.msg );
                    lock = false;
                }
                
            },
            error:function( a,b,c){
                console.log('ajax错误：', a,b,c );
            }
        })
        
    }
});

php代码：

<?php 
sleep(3);//模拟网络延时 3秒

//返回的 json数据结构
//{"error":0 , "msg":"ok" , "html":"6666", "nexturl":"jsonlist.php?page=1"} 


$page = $_GET['page'];



if( $page > 5 ){
    //没有数据了 
    //{"error":1 , "msg":"没有数据了" , "html":"", "nexturl":""} 
    $j = array();
    $j['error'] = 1;
    $j['msg'] = '没有数据了';
    $j['nexturl'] = '';
    $j['html'] = '';
    
    die( json_encode($j) ); 

}
/////////////////////////////////////////////////////////////////////////////


$page++;

$j = array();
$j['error'] = 0;
$j['msg'] = 'ok';
$j['nexturl'] = 'jsonlist.php?page=' . $page;
$j['html'] = '
    <li class="item">内容块</li>
    <li class="item">内容块</li>
    <li class="item">内容块</li>
    ...
';

die( json_encode($j) );