jquery Ajax 案例

html

<div class="data"><ul></ul></div>
<div id="load">点击加载</div>

css

/*Ajax loading*/
#load{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #666666;
    background-color: #f7f7f7;
}
.loading{
    width: 40px;
    height: 40px;
    margin: 0 auto;
    background: url(images/loading.png) center center no-repeat;
    background-size: auto 60%;
    -webkit-animation: 2s linear 0s normal none infinite loadrotate;
    animation: 2s linear 0s normal none infinite loadrotate;
}
@keyframes loadrotate{
    0%  {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes loadrotate{
    0%  {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100%{transform: rotate(360deg);}
}

js

$(function(){
    var page = 1;
    var ajax_getting = false;

    //fn Ajax
    function ajaxData(){
        var dataList = $.ajax({
            type: "GET",
            url: "../data/data" + page + ".json", //request url
            timeout: 10000,
            async: true,
            dataType: "json",
            success: function(data){
                if(data.data.length < 1){
                    $("#load").html('没有更多数据').unbind("click");;
                    return false;
                }else{
                    for (var i = 0; i < data.data.length; i++) {
                        newHtml($(".data"),data.data[i])
                    };
                    $("#load").html('点击加载');
                    page++; //after load success to plus page number
                }
                ajax_getting = false;
            },
            complete: function(XMLHttpRequest,status){
                if(status == 'timeout'){
                    aftError("请求超时",dataList);
                }
                if(status == 'error'){
                    aftError("异常",dataList);
                }
            }
        })
    }

    //fn click to load data
    $("#load").click(function(){
        $(this).html('<div class="loading"></div>');
        setTimeout(function(){
            ajaxData()
        },100)
    })

    //fn scroll to load data
    $(document).scroll(function(){
        var scrollT = $(document).scrollTop();
        var windH = $(window).height();
        var docuH = $(document).height();
        if(scrollT > docuH-windH-1){
            if(ajax_getting){
                return false;
            }else{
                ajax_getting = true;
            }
            $("#load").trigger("click");
        }
    })

    //append html code
    function newHtml(ele,objItem){
        var htmlPlus = '';
        htmlPlus += '<li>';
        htmlPlus += '<a href="'+ objItem.link +'">';
        htmlPlus += '<img src="'+ objItem.imgurl +'">';
        htmlPlus += '<span class="v_tit">'+ objItem.title +'</span>';
        htmlPlus += '</a>';
        htmlPlus += '</li>';
        ele.find("ul").append(htmlPlus);
    }

    //fn after error
    function aftError(txt,self){
        self.abort();
        alert(txt);
        $("#load").html('点击加载');
        ajax_getting = false;
    }

    //first loading
    $("#load").trigger("click");
})

json

{
    "name": "videoList",
    "data": [
        {
            "title": "电影标题1",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题2",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题3",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题4",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题5",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题6",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题7",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题8",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题9",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题10",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        }
    ]
}