ajax 는 콩잎 검색 결 과 를 결합 하여 페이지 전체 코드 를 진행 합 니 다.
특징.
1.전 과정 에서 백 스테이지 와 접촉 하지 않 고 전단 이 독립 하면 됩 니 다.(저 는 오랫동안 완전한 예 를 찾 지 못 했 습 니 다)
2.boottstrap 의 pagination 을 사용 하여 페이지 번호 와 panel 을 만 들 고 결 과 를 배치 하 는 패 널 을 만 들 었 습 니 다.
코드 는 다음 과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" /><!-- -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
</head>
<style>
.pagination> li > a {
cursor: pointer;
}
.pagination > li > span {
margin-left: 0;
color: #ccc;
background-color: transparent;
cursor: default;
}
.pagination > li > span:hover {
color: #ccc;
background-color: transparent;
cursor: default;
}
.m20 {
margin: 20px 0;
}
</style>
<body>
<div class="container-fluid">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<form class="input-group">
<input type="text" value="javascript" class="form-control" id="bookName" placeholder=" " required="required"/>
<span class="input-group-btn">
<button class="btn" id="search"> </button>
</span>
</form>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="test"></div>
</div>
<div class="col-md-4">
<div class="input-group m20"><!-- #test .pagination -->
<input type="text" class="form-control" id="page"/>
<span class="input-group-btn">
<button class="btn btn-default" id="jumpToPage">GO</button>
</span>
</div>
</div>
</div>
<div id="result" class="alert alert-info"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <!-- -->
<script type="text/javascript" src="js/bootstrap.js" ></script> <!-- -->
<script type="text/javascript">
var partPageModule = ( function ( $ ) {
var
initPager = null,//
setPagerHTML = null,// HTML
pageClick = null,//
ajax = null, // ajax
renderButton = null,
$content = $( '' ) //
;
/* ：
* @totalPages ，
* @currentPage
*/
initPager = function ( totalPages, currentPage ) {
$content = setPagerHTML({
currentPage: currentPage,
totalPages: totalPages,
pageClick: PageClick
})
$( '#test' ).empty().append( $content );// #test
$( '#jumpToPage' ).click( function ( e ) {// GO
e.preventDefault();
PageClick( totalPages, $('#page').val() * 1);
})
$( '#page' ).keyup( function ( e ) {// Enter
if ( e.keyCode === 13 ) {
$( '#jumpToPage').trigger( 'click' );
}
})
$( '#result' ).html( ' ' + currentPage + ' ')
};
/* ： 。 ， ajax
*/
PageClick = function ( totalPages, currentPage ) {
initPager( totalPages, currentPage );
ajax( currentPage );// jsonp
}
ajax = function ( currentPage ) {
var
$input = $( '#bookName' ),
bookName = '',
$tbody = $( '#tbody' )
// totalPages
;
bookName = $input.val();
if ( !bookName ) { // ，
$input.focus();
return;
} else {
$.ajax({
type: 'get',
url: 'https://api.douban.com/v2/book/search',// api
dataType: 'jsonp',
data: {
q: bookName,
start: ( parseInt( currentPage )-1 )*20 || 0
},
success: function ( data ) {
var
html = '',
books = data.books
;
// totalPages = Math.ceil( data.total / data.count );
books.forEach( function ( value, index ) {
html += '<tr>'
+ '<td><a href="' + value.alt + '">' + value.title + '</a></td>'
+ '<td>' + value.author + '</td>'
+ '<td>' + value.pubdate + '</td>'
+ '<td>' + value.rating.average + '</td>'
+ '<td>' + value.price + '</td>'
+ '</tr>';
})
$tbody.html( html );
}
})
}
// return totalPages;
}
setPagerHTML = function ( options ) {
var
currentPage = options.currentPage,
totalPages = options.totalPages,
pageClick = options.pageClick,
$content = $('<ul class="pagination"></ul>'),
startPage = 1,
nextPage = currentPage + 1,// ，
prevPage = currentPage - 1
;
/* ， ul */
if ( currentPage == startPage ) {//
$content.append( '<li><span> </span></li>' ); //
$content.append( '<li><span> </span></li>' ); //
} else { //
$content.append( renderButton( totalPages, 1, pageClick, ' ') ); //
$content.append( renderButton( totalPages, prevPage, pageClick, ' ') ); //
}
if ( totalPages <=5 && currentPage <= 5 ) {// 5， 5，
for ( var i = 1; i <= totalPages; i++ ) {
if( i === currentPage ) {
$content.append( '<li class="active><span>' + i + '</span></li>' );//
} else {
$content.append( renderButton( totalPages, i, pageClick, i) );//
}
}
} else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 5， ， ...,
$content.append( '<li><span>...</span></li>' );
for( var i = totalPages - 4; i <= totalPages; i++ ) {
if ( i === currentPage ) {
$content.append( '<li class="active"><span>' + i + '</span></li>' );
} else {
$content.append( renderButton( totalPages, i, pageClick, i) );
}
}
} else if ( totalPages > 5 && currentPage > 3) {// 5， ， ...，
$content.append( '<li><span>...</span></li>' );
for ( var i = currentPage - 2; i < currentPage + 2; i++ ) {
if ( i === currentPage ) {
$content.append( '<li class="active"><span>' + i + '</span></li>' );
} else {
$content.append( renderButton( totalPages, i ,pageClick, i) );
}
}
$content.append( '<li><span>...</span></li>' );
} else if ( totalPages > 5 && currentPage <= 3 ) {// 5， ， ， ...
for ( var i = 1; i <= 5; i++ ) {
if ( i === currentPage ) {
$content.append( '<li class="active"><span>' + i + '</span></li>' );
} else {
$content.append( renderButton( totalPages, i ,pageClick, i) );
}
}
$content.append( '<li><span>...</span></li>' );
}
if ( currentPage == totalPages ) {//
$content.append( '<li><span> </span></li>' ); //
$content.append( '<li><span> </span></li>' ); //
} else { //
$content.append( renderButton( totalPages, nextPage, pageClick, ' ') ); //
$content.append( renderButton( totalPages, totalPages, pageClick, ' ') ); //
}
return $content;
}
renderButton = function ( totalPages, goPageIndex, eventHander, text ) {
var $gotoPage = $( '<li><a title=" ' + goPageIndex + ' ">' + text + '</a></li>' );
$gotoPage.click( function () {
eventHander( totalPages, goPageIndex );
})
return $gotoPage;
}
return {
init: initPager,
ajax: ajax
}
}(jQuery))
$( function () {
$( '#search' ).click( function ( e ) {
e.preventDefault();
var totalPage = partPageModule.ajax(1);// ajax ，
totalPage = totalPage || 65;// 。 。 65 javascript ， ， ajax ， 65。 bug。
partPageModule.init( totalPage, 1 );
})
$( '#bookName' ).keyup( function ( e ) {
if ( e.keyCode === 13 ) {
$( '#search' ).trigger( 'click' );
}
})
$( '#search' ).trigger( 'click' );
})
</script>
</body>
</html>
<!-- https://api.douban.com/v2/book/search -->
<!--
q q tag
tag tag q tag
start offset 0
count 20， 100
-->
참고여기,이곳책의 논리 처리 부분 은 이곳 의 코드 를 사 용 했 지만 수정 했다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
