지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > PHP 튜토리얼 > javascript - 페이지 매기기를 연구 중입니다. 여기서는 Ajax가 제대로 작성되지 않은 것 같습니다. 어떻게 개선할 수 있나요?

javascript - 페이지 매기기를 연구 중입니다. 여기서는 Ajax가 제대로 작성되지 않은 것 같습니다. 어떻게 개선할 수 있나요?

WBOY
풀어 주다： 2016-09-29 09:33:02
원래의
910명이 탐색했습니다.

<code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="page.css">
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    *{ margin:0; padding:0; list-style:none;}
    a{ text-decoration:none;}
    a:hover{ text-decoration:none;}
    .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
    .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;
    line-height: 25px;    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
    .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;
    margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;
    margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
    ul{
        list-style: none;
    }
    .wrap >ul > li{
        width: 250px;
        height: 350px;
        margin: 20px;
        /*border: 1px green solid;*/
        float: left;
        margin-bottom: 40px;
    }
    .wrap >ul > li>img{
        width: 100%;
        height: 100%;
    }
    .wrap >ul > li>p{
        text-align: center;
        line-height: 30px;
        height: 30px;
    }
    .wrap{
        margin: 100px auto;
        border: 1px solid red;
        height: 1800px;
        width: 1460px;
    }
</style>
<body>
  <div class = 'wrap'>
       <ul class='movieList'>
           <!--<li>-->
               <!--<img src="" alt="">-->
               <!--<p>电影名：惊天魔盗团</p>-->
           <!--</li>-->
       </ul>
      <!-- 代码部分begin -->
      <div class="tcdPageCode">
      </div>
  </div>
</body>
</html>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script>

<script>
    $(function () {
       //初始化第一页数据；
        var urlApi = 'http://api.douban.com/v2/movie/top250'
        $.ajax({
            url:urlApi,
            type:'get',
            dataType:'jsonp',
            data:{
                //从第几条开始请求；
                "start" : 0,
                //请求多少条数据
                "count" : 10
            },
            success:function(data){
            //total总条数属性，计算总页数；
            var total = parseInt(data.total/10);
                result  = data.subjects;
                var str='';
                for(var i=0;i<result.length;i++){
                    var item = result[i];
                    str += '<li><img src="'+item.images.large
                            +'" alt=""><p>'+item.title+'</p></li>'
                }
                //追加渲染到页面
                $('.movieList').append(str)
                //分页插件，
                $(".tcdPageCode").createPage({
                    //pageCount：总页数
                    pageCount:total,
                    //current：当前页
                    current:1,
                    backFn:function(pageIndex){
                    //单击回调方法，pageIndex是当前页码
                        $(".movieList").empty();
                        var start = 10*pageIndex;
                        $.ajax({
                            url:urlApi,
                            type:'get',
                            dataType:'jsonp',
                            data:{
                                "start" : start,
                                "count" : 10,
                            },
                            success:function(data){
                                var result  = data.subjects;
                                var str='';
                                for(var i=0;i<result.length;i++){
                                    var item = result[i];
                                    str += '<li><img src="'+item.images.large
                                            +'" alt=""><p>'+item.title+'</p></li>'
                                }
                                $('.movieList').append(str)
                            }
                        })
                    }
                });
            }
        })
    })
</script></code>
로그인 후 복사
로그인 후 복사

답글 내용: 

<code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="page.css">
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    *{ margin:0; padding:0; list-style:none;}
    a{ text-decoration:none;}
    a:hover{ text-decoration:none;}
    .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
    .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;
    line-height: 25px;    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
    .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;
    margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;
    margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
    ul{
        list-style: none;
    }
    .wrap >ul > li{
        width: 250px;
        height: 350px;
        margin: 20px;
        /*border: 1px green solid;*/
        float: left;
        margin-bottom: 40px;
    }
    .wrap >ul > li>img{
        width: 100%;
        height: 100%;
    }
    .wrap >ul > li>p{
        text-align: center;
        line-height: 30px;
        height: 30px;
    }
    .wrap{
        margin: 100px auto;
        border: 1px solid red;
        height: 1800px;
        width: 1460px;
    }
</style>
<body>
  <div class = 'wrap'>
       <ul class='movieList'>
           <!--<li>-->
               <!--<img src="" alt="">-->
               <!--<p>电影名：惊天魔盗团</p>-->
           <!--</li>-->
       </ul>
      <!-- 代码部分begin -->
      <div class="tcdPageCode">
      </div>
  </div>
</body>
</html>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script>

<script>
    $(function () {
       //初始化第一页数据；
        var urlApi = 'http://api.douban.com/v2/movie/top250'
        $.ajax({
            url:urlApi,
            type:'get',
            dataType:'jsonp',
            data:{
                //从第几条开始请求；
                "start" : 0,
                //请求多少条数据
                "count" : 10
            },
            success:function(data){
            //total总条数属性，计算总页数；
            var total = parseInt(data.total/10);
                result  = data.subjects;
                var str='';
                for(var i=0;i<result.length;i++){
                    var item = result[i];
                    str += '<li><img src="'+item.images.large
                            +'" alt=""><p>'+item.title+'</p></li>'
                }
                //追加渲染到页面
                $('.movieList').append(str)
                //分页插件，
                $(".tcdPageCode").createPage({
                    //pageCount：总页数
                    pageCount:total,
                    //current：当前页
                    current:1,
                    backFn:function(pageIndex){
                    //单击回调方法，pageIndex是当前页码
                        $(".movieList").empty();
                        var start = 10*pageIndex;
                        $.ajax({
                            url:urlApi,
                            type:'get',
                            dataType:'jsonp',
                            data:{
                                "start" : start,
                                "count" : 10,
                            },
                            success:function(data){
                                var result  = data.subjects;
                                var str='';
                                for(var i=0;i<result.length;i++){
                                    var item = result[i];
                                    str += '<li><img src="'+item.images.large
                                            +'" alt=""><p>'+item.title+'</p></li>'
                                }
                                $('.movieList').append(str)
                            }
                        })
                    }
                });
            }
        })
    })
</script></code>
로그인 후 복사
로그인 후 복사

자신만의 jquery 페이징 플러그인을 작성할 수 있습니다. 제가 직접 아주 간단한 플러그인을 작성했습니다...

주소는 여기 https://github.com/luoyjx/jqu...

관련 라벨：
javascript node.js php
원천：php.cn
이전 기사：thinkphp 알리페이, 웹스캔코드 결제 다음 기사：매개변수가 URL을 통해 전달되면 다른 페이지가 표시됩니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다. 카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
에서 2024-04-06 22:09:02
0
1
1428
Apache에서 CustomLog 지시문을 어디에 배치해야 합니까? 저는 php:7.2-apachedocker를 사용하고 있습니다. 상태 확인 URL 로그인 액세스 로그를 비활성화해야 합니다. 이 링크를 기반으로 Customlog...
에서 2024-04-06 22:03:59
0
1
990
반환 값의 변수 형식은 무엇입니까? 저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
에서 2024-04-06 21:55:20
0
1
778
opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
에서 2024-04-06 20:18:18
0
1
483
루프 오버를 위해 ID별로 MySQL 결과 그룹화 mysql에 비행 데이터가 포함된 테이블이 있습니다. codeigniter3 travel_idair_idFlightDurationout_or_inflightdur...
에서 2024-04-06 17:27:56
0
1
406
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿