Blogger Information
Blog 11
fans 0
comment 1
visits 15622
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Html上下、左右滚动获取数据
JasonKim的博客
Original
1248 people have browsed it
<script type="text/javascript">
    $(function(){

        var page    = 2;// 设置当前页数
        var footer  = 0;// 设置高度 滚动到底部的高度
        $('#yutis').scroll(function(){
            var viewH     = $(this).height();// 可见高度
            var contentH  = $(this).get(0).scrollHeight;// 内容高度
            var scrollTop = $(this).scrollTop();     // 滚动高度
            var offset    = scrollTop/(contentH-viewH); // 计算偏移量
            var last_page = $('#last_page').val();
            // 偏移值要大于等于0.95 并且高度值需要大于上次请求的高度值
            if((offset >= 0.95) && (scrollTop > footer)) {

                if((page <= last_page)) {
                    $.ajax({
                        url:'/widtholds/formats',
                        type:'POST',
                        dataType:'html',
                        data:{
                            'batch_num':$('#batch_num').val(),
                            'page':page,
                            '_token':"{{csrf_token()}}"
                        },
                        success:function(datas) {
                            console.log('page: '+page)
                            var jdata = JSON.parse(datas);
                            // 成功获取数据
                            if(jdata.code == 1) {
                                // 记录上一次触底的值
                                footer = scrollTop;
                                // 从末尾添加数据
                                $('#yutis').append(jdata.data);
                            } else {
                                alert(jdata.data);
                            }
                        },
                        error:function(err) {}
                    });
                    page++;// 分页ID自增
                }

            }
        })

    })

    // 失去焦点事件   使用Append 添加数据后使用事件无效的方法
    $(document).on('blur','.inputs',function(){
        console.log($(this).val())
        console.log($(this).attr('name'))
    })

</script>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post