use jquery and ajax to load data

Posted on | In

use jquery and ajax to load data

example 1

http://www.cnblogs.com/52fhy/p/5405541.html

click

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(function() {
    /*初始化*/
    var counter = 0; /*计数器*/
    var pageStart = 0; /*offset*/
    var pageSize = 1; /*size*/
    /*首次加载*/
    getData(pageStart, pageSize);
    
    /*监听加载更多*/
    $(document).on('click', '.iu', function(){
        counter ++;
        pageStart = counter * pageSize;
        
        getData(pageStart, pageSize);
    });
});
function getData(offset,size){
$.ajax({
    url: 'https://eztv.ag/api/get-torrents?imdb_id=6048596',
    type: 'GET',
    dataType: 'JSON',
    success: function (response) {
      var result = '';
      var data= response.torrents;
        for(var i=offset; i< (offset+size); i++){
        result += "<li>" + "<span>" + data[i].id + "</span>" + "<span>" + data[i].title + "</span>"+ "<span>" + data[i].size_bytes + "</span>"+"</li>"    
    }
        $('.hold').append(result);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.responseText); 
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus); 
    }
});
}

scroll down

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(function(){
    /*初始化*/
    var counter = 0; /*计数器*/
    var pageStart = 0; /*offset*/
    var pageSize = 7; /*size*/
    var isEnd = false;/*结束标志*/
    
    /*首次加载*/
    getData(pageStart, pageSize);
    
    /*监听加载更多*/  
    $(window).scroll(function(){
        if(isEnd == true){
            return;
        }
        // 当滚动到最底部以上100像素时， 加载新内容
        // 核心代码
        if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
            counter ++;
            pageStart = counter * pageSize;
            
            getData(pageStart, pageSize);
        }
    });
});
//and
if ( (offset + size) >= sum){
    isEnd = true;//没有更多了
}

example 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
            $.ajax({
                type: "GET",//请求方式
                url: "1.json",//地址，就是json文件的请求路径
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
                 var tt='';   
                $.each(result,function(index,obj){
                    var Rank = obj['rank'];  
                    var Id = obj['id'];  
                    var Title = obj['title'];  
                    var Score = obj['score'];
                    tt+="<li>"+
                    "<span'>"+Rank+"</span>"+
                    "<span>"+Id+"</span>"+
                    "<span'>"+Title+"</span>"+
                    "<span'>"+Score+"</span>"+
                    "</li>";  
                
            });
                $("#box").append(tt);
                }
            });
        });

example 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
$(function(){
    var counter = 0; /*计数器*/
    var pageStart = 0; /*offset*/
    var pageNum = 1; /*size*/
    /*首次加载*/
    getData(pageStart, pageNum);
    
    /*监听加载更多*/
    $(document).on('click', '.iu', function(){
        counter ++;
        pageStart = counter * pageNum;
        
        getData(pageStart, pageNum);
    });
    });
function getData(offset,size){
    $.ajax({
        type: "GET",//请求方式
        url: "1.json",//地址，就是json文件的请求路径
        dataType: "json",//数据类型可以为 text xml json  script  jsonp
        beforeSend:function(){
           $(".io").append('<img src="loading.gif" />');
        },
　　    success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
          var tt='';
          var data= result;  
          for(var i=offset; i< (offset+size); i++){
                var Rank = data[i].rank;  
                var Id = data[i].id;  
                var Title = data[i].title;  
                var Score = data[i].score;
                tt+="<li>"+
                    "<span'>"+Rank+"</span>"+
                    "<span>"+Id+"</span>"+
                    "<span'>"+Title+"</span>"+
                    "<span'>"+Score+"</span>"+
                    "</li>";  
                
            };
                $("#box").append(tt);
            if ( (offset + size) >= sum){
                $(".iu").hide();
            }else{
                $(".iu").show();
            }
            $(".io").hide();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.responseText); 
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus); 
    }
        });
        }