ajax 请求数据

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>测试</title>

</head>



<body>

<div class="xfl" id="commendedGameList">

    <ul>

        <li>

            <a href="http://m.anfensi.com/down/114965.html" class="pic"><img src="http://3.pic.anfensi.com/thumb/Uploads/Picture/2015-07-02/559491e368046_66_66.jpg"></a>

            <div class="main">

            <div><a href="http://m.anfensi.com/down/114965.html">开拍</a></div>

            <div><i>摄影</i><i>18.17 MB</i><i>简体</i></div>

            </div>

            <a href="http://m.anfensi.com/down/114965.html" class="down">下载</a>

        </li>

        <li>

            <a href="http://m.anfensi.com/down/114989.html" class="pic"><img src="http://1.pic.anfensi.com/thumb/Uploads/Picture/2015-07-02/5594a7f761d60_66_66.jpg"></a>

            <div class="main">

            <div><a href="http://m.anfensi.com/down/114989.html">星期衣</a></div>

            <div><i>购物</i><i>8.61 MB</i><i>简体</i></div>

            </div>

            <a href="http://m.anfensi.com/down/114989.html" class="down">下载</a>

        </li>

        <li>

            <a href="http://m.anfensi.com/down/114965.html" class="pic"><img src="http://3.pic.anfensi.com/thumb/Uploads/Picture/2015-07-02/559491e368046_66_66.jpg"></a>

            <div class="main">

            <div><a href="http://m.anfensi.com/down/114965.html">开拍</a></div>

            <div><i>摄影</i><i>18.17 MB</i><i>简体</i></div>

            </div>

            <a href="http://m.anfensi.com/down/114965.html" class="down">下载</a>

        </li>

        <li>

            <a href="http://m.anfensi.com/down/114989.html" class="pic"><img src="http://1.pic.anfensi.com/thumb/Uploads/Picture/2015-07-02/5594a7f761d60_66_66.jpg"></a>

            <div class="main">

            <div><a href="http://m.anfensi.com/down/114989.html">星期衣</a></div>

            <div><i>购物</i><i>8.61 MB</i><i>简体</i></div>

            </div>

            <a href="http://m.anfensi.com/down/114989.html" class="down">下载</a>

        </li>

        <li>

            <a href="http://m.anfensi.com/down/114965.html" class="pic"><img src="http://3.pic.anfensi.com/thumb/Uploads/Picture/2015-07-02/559491e368046_66_66.jpg"></a>

            <div class="main">

            <div><a href="http://m.anfensi.com/down/114965.html">开拍</a></div>

            <div><i>摄影</i><i>18.17 MB</i><i>简体</i></div>

            </div>

            <a href="http://m.anfensi.com/down/114965.html" class="down">下载</a>

        </li>

        <li>

            <a href="http://m.anfensi.com/down/114989.html" class="pic"><img src="http://1.pic.anfensi.com/thumb/Uploads/Picture/2015-07-02/5594a7f761d60_66_66.jpg"></a>

            <div class="main">

            <div><a href="http://m.anfensi.com/down/114989.html">星期衣</a></div>

            <div><i>购物</i><i>8.61 MB</i><i>简体</i></div>

            </div>

            <a href="http://m.anfensi.com/down/114989.html" class="down">下载</a>

        </li>

        <li>

            <a href="http://m.anfensi.com/down/114965.html" class="pic"><img src="http://3.pic.anfensi.com/thumb/Uploads/Picture/2015-07-02/559491e368046_66_66.jpg"></a>

            <div class="main">

            <div><a href="http://m.anfensi.com/down/114965.html">开拍</a></div>

            <div><i>摄影</i><i>18.17 MB</i><i>简体</i></div>

            </div>

            <a href="http://m.anfensi.com/down/114965.html" class="down">下载</a>

        </li>

        <li>

            <a href="http://m.anfensi.com/down/114989.html" class="pic"><img src="http://1.pic.anfensi.com/thumb/Uploads/Picture/2015-07-02/5594a7f761d60_66_66.jpg"></a>

            <div class="main">

            <div><a href="http://m.anfensi.com/down/114989.html">星期衣</a></div>

            <div><i>购物</i><i>8.61 MB</i><i>简体</i></div>

            </div>

            <a href="http://m.anfensi.com/down/114989.html" class="down">下载</a>

        </li>

    </ul>

    <a href="javascript:void(0)" onClick="" data-type="danji" id="get_more">点击加载更多</a>

</div>

<script src="js/jquery.js"></script>

<script>

$(function(){

    function api_soft(fa){

        var ul  = $(fa).find('ul');

        var li  = ul.find('li');

        var num = li.length;



        $.ajax({

            dataType:'jsonp',

            jsonp:"callback",

            url: 'http://dynamic.anfensi.com/dynamic.php?s=/Afsmobile/API_soft/',

            data:"num="+num+"&&key=2",

            success:function(data){

                if(data){

                    var html = '';

                    for(i in data){

                        html += '<li><a href="'+data[i].url+'" class="pic"><img src="'+data[i].img+'"></a><div class="main"><div><a href="'

                        +data[i].url+'">'+data[i].title+'</a></div><div><i>'+data[i].cate+'</i><i>'+data[i].size+'</i><i>'+data[i].language+'</i></div></div><a href="'

                        +data[i].url+'" class="down">下载</a></li>';

                    }

                    li.last().after(html);

                }else{

                    $('#get_more').text('没有更多数据了');

                    $('#get_more').removeAttr('onclick');

                }

            }

        });

        

    };

/*    $('#get_more').click(function(){  //点击加载

        api_soft('#commendedGameList')

    });*/

    

    //alert($('#get_more').offset().top)

    $(window).scroll(function(){//无限下拉加载

        if( $(document).scrollTop() + $(window).height() > $(document).height() - 10){

           api_soft('#commendedGameList');

        };

    });

})

</script>

</body>

</html>

//上面写的下啦鼠标会多次请求数据,修改次bug需要这样

$(window).scroll(function(){//无限下拉加载
    if($(window).scrollTop()+$(window).height()>=$(document).height()){
        api_soft('#commendedGameList');
    };
});

 

一个感觉挺好的个人学习博客:http://kayosite.com/jquery-ajax-turn-page-and-cascade-layout.html

 

你可能感兴趣的:(Ajax)