JQuery_Ajax()基本応用

ソース:JS

    
    
    



    
1
    
2
    click
    
        /*
         
        1.url;
        2.get,post
        3. ：
        {
            start：2，
            length：6
        }
        4. :
        {
            status：1 --OK
            data：[3,4,5,6,7,8]

            status：0 --ERROR
        }
        */
$('.button').on('click', function(){
        $.ajax(
            {
                url:'http://localhost/renwu26-3.php',
                dataType:'json',
                type:'get',
                data:{
                    start:$('.line').length,
                    len:6
                },
                success:function(json){
                    onSuccess(json);
                },
                error:function(){
                    onError();
                },
            }
        );
        function onSuccess(json){
            if(json.status==1){
                append(json.data);
            }
            else{
                alert(' ');
            }
        };
        function onError(){
            alert(' ');
        };

        function append(arr){
            for(var i=0;i<arr.length;i++){
                $('.line:last').after('<div class="line">'+arr[i]+'</div>');
            }
        };
})

$('body').on('mouseenter', 'div', function(){
    $(this).addClass('hover');
    console.log(1);
})
$('body').on('mouseleave', 'div', function(){
    $(this).removeClass('hover');
})

    

php:

1, 'data'=>$items);

    //{status: 1, data: [' 1',' 2',' 3']}
    sleep(0.5);
    echo json_encode($ret);
?>