zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    kafka官方的kafka-server-start.sh不能关闭kafka进程解决办法
    Linux如何切换图形界面和命令行界面
    2019-9-28:渗透测试,基础学习,DNS投毒
    2019-9-28:渗透测试,基础学习,pgp常量,逻辑运算,DNS投毒,笔记
    2019-9-10:渗透测试,基础学习,nmap扫描命令,php基本语法学习,笔记
    2019-9-11:渗透测试,Kill远控软件,初接触
    2019-9-27:渗透测试,metasploit-framework初接触
    2019-9-26:渗透测试,基础学习,js正则以及什么是目录扫描,笔记
    2019-9-26:渗透测试,基础学习,nmap扫描kali虚拟机服务
    2019-9-25:渗透测试,基础学习,Hydra BP爆破,js基本知识,banner信息收集笔记
  • 原文地址:https://www.cnblogs.com/cainiaoz/p/4619007.html
Copyright © 2011-2022 走看看