IntelliJ IDEA 에서 ajax 개발 실현 페이지 조회 예시
개발 환경:
시스템 window 10
IDEA 에서 초기 설정 을 개발 하 는 작업 은 인터넷 에 댓 글 이 많 기 때문에 저 는 여기 서 더 이상 언급 하지 않 겠 습 니 다.주로 세 가 지 를 말 합 니 다.
서버 설정 에서 빨간색 상자 의 두 가 지 는 update classes and resource 를 선택 하고 선택 하면 열 배 치 를 실현 할 수 있 습 니 다.
여기에 항목 의 이름 을 입력 하 십시오.항목 의 루트 경로 로
jar 패 키 지 를 가 져 오 는 방법 은 그림 과 같 습 니 다.dependencie 에서 추가 번 호 를 누 르 고 자신 이 만 든 lib 폴 더 를 선택 하 십시오.
관련 jar 패키지 가 져 오기:c3p 0 의 jar 패키지,DbUtils 도구 류 jar 패키지,fastJSon 의 jar 패키지,my sql 구동 jar 패키지
데이터베이스 test 03 의 produt 표 에 다음 과 같은 데 이 터 를 기록 합 니 다.
IDEA 에서 프로젝트 패키지 및 c3p 0 연결 풀 가 져 오기 설정
c3p 0 프로필,데이터베이스 이름 및 데이터베이스 비밀번호 로 변경 하 십시오.
domain 패키지 에서 제품 실체 류 를 만 들 고 데이터베이스 에 있 는 produt 표 의 필드 에 따라 제품 류 에서 해당 하 는 속성 을 작성 합 니 다.get set 방법 을 생 성 합 니 다.
연결 풀 대상 가 져 오기 도구 클래스 만 들 기
두 번 째 단계:모든 상품 정 보 를 페이지 없 이 조회 합 니 다.
실현 방향:
jsp/html---->servlet(웹 층 처리 요청 및 응답 데이터)------>service(service 층 처리 논리)------>dao(dao 층 처리 데이터베이스 작업)
제품 페이지 를 만 들 고 서버 에 요청 을 보 냅 니 다(모든 제품 정보 가 져 오기)
전단 에 boottstrap 응답 식 개발 을 사용 하여 페이지 를 더욱 아름 답 고 개발 이 편리 하 게 할 수 있 습 니 다.
페이지 정보의 코드 는 다음 과 같 습 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<!-- bootstrap -->
<link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" >
<script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script>
</head>
<script type="text/javascript">
// , ,
$(function () {
//=================== , ===============================
var url ="/ajax_product/product";
//===== post
$.post(url,function (data) {
//
//============================
var products = eval(data);
//
for (var i = 0; i < products.length; i++) {
//
var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>");
// ,
$("#tab").append(protd);
}
},"json")
})
</script>
<body>
<h3 align="center"> </h3>
<div class="container">
<!-- -->
<div class="row">
<div class="col-md-12">
<!--table-hover ,
table-bordered
-->
<table class="table table-hover table-bordered" id="tab">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>IDEA 에서 servlet 를 만 드 는 것 은 다음 그림 과 같 습 니 다.
여기 서 체크 하지 않 고 자동 으로 주 해 를 생 성 합 니 다.
ok 을 클릭 하면 IDEA 는 자동 으로 웹.xml 파일 로 이동 하여 Servlet 의 전체 경로 이름 을 자동 으로 기록 합 니 다.url-pattern 만 쓰 면 됩 니 다.
url-pattern 은 ajax 요청 의 Servlet 과 일치 하 게 써 야 합 니 다.
웹 층 Servlet 의 코드 는 다음 과 같 습 니 다.
package com.thc.web;
import com.alibaba.fastjson.JSONObject;
import com.thc.service.ProductService;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
public class Product extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// ,
// , ,
ProductService service = new ProductService();
try {
// ,
List<com.thc.domain.Product> allProuct = service.findAllProuct();
// , json
String jsonString = JSONObject.toJSONString(allProuct);
//
response.getWriter().write(jsonString);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}웹 계층 호출 서비스 계층 의 코드 는 다음 과 같 습 니 다.
package com.thc.service;
import com.thc.dao.ProductDao;
import com.thc.domain.Product;
import java.sql.SQLException;
import java.util.List;
public class ProductService {
// service , dao , web
public List<Product> findAllProuct() throws SQLException {
ProductDao dao = new ProductDao();
// dao
List<Product> allProduct = dao.findAllProduct();
return allProduct;
}
}
package com.thc.dao;
import com.thc.domain.Product;
import com.thc.utils.JdbcUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import java.sql.SQLException;
import java.util.List;
//=================dao
public class ProductDao {
//===========
public List<Product> findAllProduct() throws SQLException {
// dbutils, QueryRunner
QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
// sql ,
String sql = "select * from product";
// , list , product
List<Product> products = qr.query(sql, new BeanListHandler<>(Product.class));
return products;
}
}
$.post(url,function (data) {
//
//============================
var products = eval(data);
//
for (var i = 0; i < products.length; i++) {
//
var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>");
// ,
$("#tab").append(protd);
}
},"json")
응답 한 데 이 터 를 모두 복사 하면 다음 과 같은 데이터 입 니 다.한 배열 에 제품 의 대상 이 포함 되 어 있 습 니 다.
대상 에는 키 값 이 맞 는 형식 으로 존재 합 니 다.
예 를 들 어 첫 번 째 데이터 에서 키 는 count 이 고 값 은 100 입 니 다.키 는 id 이 고 값 은 1 이 며 키 는 name 이 고 값 은 텔레비전 이 며 키 는 price 값 은 2000 입 니 다.
[
{"count":100,"id":1,"name":" ","price":2000},
{"count":200,"id":2,"name":" ","price":1000},
{"count":300,"id":3,"name":" ","price":3000},
{"count":50,"id":4,"name":" ","price":2000},
{"count":1000,"id":5,"name":"HP ","price":4000},
{"count":100,"id":6,"name":" ","price":5000},
{"count":60,"id":7,"name":" ","price":2000},
{"count":100,"id":8,"name":" ","price":2200},
{"count":300,"id":9,"name":" ","price":2000},
{"count":200,"id":10,"name":" ","price":2000},
{"count":500,"id":11,"name":" ","price":2000},
{"count":100,"id":12,"name":" ","price":399},
{"count":200,"id":13,"name":" ","price":498},
{"count":300,"id":14,"name":" ","price":299},
{"count":50,"id":15,"name":" ","price":1299},
{"count":200,"id":16,"name":" ","price":199},
{"count":300,"id":17,"name":" ","price":398},
{"count":500,"id":18,"name":" ","price":99},
{"count":250,"id":19,"name":" ","price":98},
{"count":1000,"id":20,"name":" ","price":16.5},
{"count":1200,"id":21,"name":" ","price":8.8},
{"count":1500,"id":22,"name":" ","price":9.9}
]한 페이지 에서 모든 데 이 터 를 보 여 주 었 습 니 다.만약 에 데이터 가 매우 많 으 면 예 를 들 어 바 이 두 에서 키 워드 를 검색 한 결과 수만 억 개가 넘 을 수 있 습 니 다.데이터 베이스 에서 이렇게 많은 결 과 를 브 라 우 저 에 게 가 져 다 주 는 것 은 오 랜 시간 이 고 사용자 체험 이 매우 좋 지 않 기 때문에 페이지 기술 이 필요 합 니 다.물리 적 페이지 를 사용 합 니 다.
데이터베이스 에서 현재 페이지 에 필요 한 정보 만 조회 합 니 다.
세 번 째 단계:현재 페이지 수 와 각 페이지 에 표 시 된 수량 을 서버 에 전달 합 니 다.
html 페이지 에 현재 페이지 수 와 각 페이지 에 표 시 된 수량 을 증가 시 켜 서버 에 전달 해 야 합 니 다.
다음 그림 과 같이 코드 변경:
servlet 층 에서 파 라 메 터 를 받 아야 하고 service 층 에서 현재 페이지 의 데 이 터 를 조회 해 야 합 니 다.코드 는 다음 과 같 습 니 다.
public class Product extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//
int pageNo = Integer.parseInt(request.getParameter("pageNo"));
//
int pageSize = Integer.parseInt(request.getParameter("pageSize"));
// ,
// , ,
ProductService service = new ProductService();
try {
// , service ,
List<com.thc.domain.Product> product = service.findProduct(pageNo, pageSize);
String jsonString = JSONObject.toJSONString(product);
//
response.getWriter().write(jsonString);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
public List<Product> findProduct(int pageNo, int pageSize) throws SQLException {
ProductDao dao = new ProductDao();
List<Product> product = dao.findProduct(pageNo, pageSize);
return product;
}
public List<Product> findProduct(int pageNo, int pageSize) throws SQLException {
QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
String sql ="select * from product limit ?,?";
//limit : , 0
// :
// : ,
List<Product> productList = qr.query(sql, new BeanListHandler<>(Product.class), (pageNo - 1) * pageSize, pageSize);
return productList;
}하지만 페이지 단 추 를 누 르 면 페이지 를 넘 길 수 는 없다.
그러면 페이지 가 페이지 바 와 데 이 터 를 어떻게 표시 하 는 지 고려 해 야 합 니까?
우 리 는 페이지 의 페이지 에 표 시 된 페이지 수 는 동적 변화 라 는 것 을 알 고 있 습 니 다.총 페이지 수=데이터 의 총 페이지 수/각 페이지 에 표 시 된 데 이 터 는 위로 조정 해 야 합 니 다.즉,우리 의 페이지 는 List
네 번 째 단계:페이지 의 관련 데 이 터 를 자바 빈 으로 패키지 합 니 다.
domain 패키지 에 PageBean 이라는 클래스 를 만 듭 니 다.속성 은 다음 과 같 습 니 다.
private int pageNo;//
private int pageSize;//
private int totalCount;//
private int totalPage;//
private List<Product> products;// 웹 계층 의 최종 코드 는 다음 과 같 습 니 다.
public class Product extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//
int pageNo = Integer.parseInt(request.getParameter("pageNo"));
//
int pageSize = Integer.parseInt(request.getParameter("pageSize"));
// ,
// , ,
ProductService service = new ProductService();
try {
/* ,
List<com.thc.domain.Product> allProuct = service.findAllProuct();
, json
String jsonString = JSONObject.toJSONString(allProuct);*/
// , service ,
//List<com.thc.domain.Product> product = service.findProduct(pageNo, pageSize);
//=============== web pagebean =================================
PageBean pageBean = service.findPageInfo(pageNo, pageSize);
//=============== json===============================
String jsonString = JSONObject.toJSONString(pageBean);
//================ ====================
response.getWriter().write(jsonString);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}service 층 의 최종 코드 는 다음 과 같 습 니 다.
public class ProductService {
// service , dao , web
//=========Service web ====================
public List<Product> findAllProuct() throws SQLException {
ProductDao dao = new ProductDao();
// dao
List<Product> allProduct = dao.findAllProduct();
return allProduct;
}
//============service web =================================
public List<Product> findProduct(int pageNo, int pageSize) throws SQLException {
ProductDao dao = new ProductDao();
List<Product> product = dao.findProduct(pageNo, pageSize);
return product;
}
//============service pagebean ===================================
public PageBean findPageInfo(int pageNo, int pageSize) throws SQLException {
ProductDao dao = new ProductDao();
List<Product> product = dao.findProduct(pageNo, pageSize);
int totalCount = dao.findTotalCount();
PageBean pb = new PageBean();
//
pb.setTotalCount(totalCount);
pb.setPageNo(pageNo);
pb.setPageSize(pageSize);
pb.setProducts(product);
// , , 1.0,
int totalPage = (int) Math.ceil(totalCount*1.0/pageSize);
pb.setTotalPage(totalPage);
// servlet
return pb;
}
}dao 층 최종 코드 는 다음 과 같 습 니 다.
//=================dao
public class ProductDao {
//===========
public List<Product> findAllProduct() throws SQLException {
// dbutils, QueryRunner
QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
// sql ,
String sql = "select * from product";
// , list , product
List<Product> products = qr.query(sql, new BeanListHandler<>(Product.class));
return products;
}
//======================= =====================
public List<Product> findProduct(int pageNo, int pageSize) throws SQLException {
QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
String sql ="select * from product limit ?,?";
//limit : , 0
// :
// : ,
List<Product> productList = qr.query(sql, new BeanListHandler<>(Product.class), (pageNo - 1) * pageSize, pageSize);
return productList;
}
//=============== =================
public int findTotalCount() throws SQLException {
QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
String sql = "select count(*) from product";
Long countL =(Long) qr.query(sql, new ScalarHandler());
return countL.intValue();
}
}table 탭 아래 에 한 줄 을 추가 하여 페이지 를 나 누 는 구성 요 소 를 제공 합 니 다.동적 으로 보 여 줘 야 하기 때문에 li 코드 를 설명 합 니 다.
먼저 받 아야 할 매개 변수 변 수 를 설명 합 니 다.
var url ="/ajax_product/product";
var pageNo=1;// 1
var pageSize=6;// 6
var totalPage;//
var products;//
$.post(
url,//
{"pageNo": pageNo, "pageSize": pageSize},//
function (data) {})
{"pageNo":1,
"pageSize":6,
"products":[{"count":100,"id":1,"name":" ","price":2000},
{"count":200,"id":2,"name":" ","price":1000},
{"count":300,"id":3,"name":" ","price":3000},
{"count":50,"id":4,"name":" ","price":2000},
{"count":1000,"id":5,"name":"HP ","price":4000},
{"count":100,"id":6,"name":" ","price":5000}],
"totalCount":22,
"totalPage":3}표 의 데이터 보이 기
먼저 백 엔 드 에서 얻 은 데 이 터 를 분석 한 다음 js 코드 에 동기 화하 고 pagebean.products 를 통 해 모든 produt 대상 의 데 이 터 를 얻 은 배열 을 얻 은 다음 에 이 배열 을 옮 겨 다 니 며 produt 속성의 값 을 표 에 연결 합 니 다.
코드 는 다음 과 같다.
$.post(
url,//
{"pageNo": pageNo, "pageSize": pageSize},//
function (data) {
// pagebean , json
var pagebean = eval(data);
//
pageNo=pagebean.pageNo;
pageSize=pagebean.pageSize;
totalPage=pagebean.totalPage;
products=pagebean.products;
// ===============================================
for (var i = 0; i < products.length; i++) {
//
var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td> <td>"+products[i].count+"</td><td>"+products[i].price+"</td> </tr>");
// ,
$("#tab").append(protd);
}
},"json")
페이지 바 데이터 보이 기
이전 페이지 와 다음 페이지 의 데 이 터 를 먼저 표시 합 니 다.
//
// ,
//
var preLi=$('<li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a></li>');
// ,
$(".pager").append(preLi);
//
var nextLi=$('<li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a></li>');
// ,
$(".pager").append(nextLi);
페이지 데이터 보이 기:
//
// ,
//
var preLi=$('<li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a></li>');
// ,
$(".pager").append(preLi);
//
for (var i = 1; i <= totalPage; i++) {
// li
var li=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>');
// , ul
$(".pager").append(li);
}
//
var nextLi=$('<li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a></li>');
// ,
$(".pager").append(nextLi);
현재 페이지 강조
boottstrap 에서 pager 류 는 하 이 라이트 디 스 플레이 를 지원 하지 않 기 때문에 페이지 의 종 류 를 pagination 으로 바 꿉 니 다.
하 이 라이트 의 논 리 는 현재 페이지(pageno)인지 아 닌 지 를 판단 하 는 것 입 니 다.
li 태그 에 class 의 active 속성 을 추가 합 니 다.
//
for (var i = 1; i <= totalPage; i++) {
var li;
if(i===pageNo){
//========= ,
li=$('<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>');
// , ul
$(".pagination").append(li);
}else{
//======== ,
li=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>');
// , ul
$(".pagination").append(li);
}
}
페이지 에 클릭 이 벤트 를 추가 하고 데 이 터 를 전환 합 니 다.
현재 페이지 에 클릭 이 벤트 를 추가 할 필요 가 없습니다.
페이지 에 있 는 a 탭 에 onclick 이 벤트 를 추가 하고 skipPage()함 수 를 연결 합 니 다.skipPage()함수 에서 하 는 작업 은 실제 적 으로 1 페이지 데 이 터 를 가 져 와 서버 에 Ajax 의 post 요청 을 보 내 는 작업 입 니 다.그래서$(function(){})코드 를 skipPage()함수 에 복사 한 다음 페이지 에 불 러 올 때 skipPage()함 수 를 호출 합 니 다.1 을 입력 하면 1 페이지 데 이 터 를 기본 으로 불 러 옵 니 다.이 때$(function(){})는 한 번 만 실 행 됩 니 다.skipPage()는 재 귀 함수 가 되 어 자신 을 호출 합 니 다.단,이 벤트 를 한 번 클릭 하면 skipPage 방법 을 한 번 만 호출 합 니 다.자바 의 재 귀 와 는 다 릅 니 다.
이 코드 를 실행 한 후 서로 다른 코드 를 클릭 하면 표 의 내용 과 페이지 가 계속 중첩 되 는 것 을 발견 할 수 있 습 니 다.
다음 그림 에서 보 듯 이:
데 이 터 를 불 러 올 때마다 데 이 터 를 비 웁 니 다.페이지 바 를 비 웁 니 다.
페이지 바 를 비 우 는 코드 를 추가 한 후,페이지 바 는 중첩 되 지 않 았 으 나,표 는 여전히 중첩 되 어 있 는 것 을 발견 하 였 다.
표 비우 기
$("#tab").empty();표 에 빈 코드 를 실행 한 후에 다음 과 같은 현상 을 발견 했다.
표 의 첫 줄 제목 이 없어 졌 기 때문에 선택 기 를 사용 하여 첫 줄 을 제외 해 야 합 니 다.
$("\#tab tr:not(:first)")의 의 미 는?
먼저 id 선택 기 에 따라 표를 선택 하 십시오.
등급 선택 기 에서 tr 줄 을 선택 하 십시오.
기본 선택 기 not 에 기본 선택 기 first 를 끼 워 넣 으 면 첫 번 째 줄 이 아 닙 니 다.
전체 적 으로 는 첫 줄 이 아 닌 요 소 를 선택 하고 empty()방법 을 사용 하여 일치 하 는 요소 집합 에 있 는 모든 하위 노드 를 삭제 한 다 는 뜻 이다.
테스트 후 첫 줄 데 이 터 를 삭제 하지 않 을 수 있 습 니 다.
이전 페이지 에서 사용 가능 여 부 를 판단 하고 페이지 전환 기능
현재 페이지 가 첫 페이지 라면 이전 페이지 의 기능 을 사용 할 수 없습니다.
현재 페이지 가 첫 페이지 가 아니라면 클릭 이 벤트 를 추가 하고 이전 페이지 로 전환 하여 페이지 번 호 를 하나 줄 입 니 다.
// ,
var preLi;
if(pageNo===1){
// ,
preLi=$('<li class="disabled"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a></li>');
}else{
preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo-1)+')"> </a></li>');
}
// ,
$(".pagination").append(preLi);현재 페이지 가 마지막 페이지 라면 이전 페이지 기능 을 사용 할 수 없습니다.
현재 페이지 가 마지막 페이지 가 아니라면 클릭 이 벤트 를 추가 하고 다음 페이지 로 전환 하여 페이지 번 호 를 추가 합 니 다.
// ,
var nextLi;
if(pageNo===totalPage){
// , .
nextLi=$('<li class="disabled"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a></li>');
}else {
// , , , .
nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo+1)+')"> </a></li>');
}
// ,
$(".pagination").append(nextLi);전단 페이지 의 모든 코드 는 다음 과 같 습 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<!-- bootstrap -->
<link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" >
<script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script>
</head>
<script type="text/javascript">
var url ="/ajax_product/product";
var pageNo=1;// 1
var pageSize=5;// 6
var totalPage;//
var products;//
// , ,
$(function () {
skipPage(1);
});
function skipPage(page) {
//=========== post ===================================
pageNo=page;
//===== post
$.post(
url,//
{"pageNo": pageNo, "pageSize": pageSize},//
function (data) {
// pagebean , json
var pagebean = eval(data);
//
pageNo=pagebean.pageNo;
pageSize=pagebean.pageSize;
totalPage=pagebean.totalPage;
products=pagebean.products;
// ===============================================
//$("#tab").empty();
$("#tab tr:not(:first)").empty();
for (var i = 0; i < products.length; i++) {
//
var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+" </td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>");
// ,
$("#tab").append(protd);
}
// ========================================================
//
$(".pagination").empty();
// ,
// ,
var preLi;
if(pageNo===1){
// , .
preLi=$('<li class="disabled"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a> </li>');
}else{
// , , , .
preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo- 1)+')"> </a></li>');
}
// ,
$(".pagination").append(preLi);
//
for (var i = 1; i <= totalPage; i++) {
var li;
if(i===pageNo){
//========= ,
li=$('<li class="active"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a> </li>');
// , ul
$(".pagination").append(li);
}else{
//======== , . ,
li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+i+')">'+i+'</a></li>');
// , ul
$(".pagination").append(li);
}
}
// ,
var nextLi;
if(pageNo===totalPage){
// , .
nextLi=$('<li class="disabled"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a> </li>');
}else {
// , , , .
nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+ (pageNo+1)+')"> </a></li>');
}
// ,
$(".pagination").append(nextLi);
},"json")
}
</script>
<body>
<h3 align="center"> </h3>
<div class="container">
<!-- -->
<div class="row">
<div class="col-md-12">
<!--table-hover ,
table-bordered
-->
<table class="table table-hover table-bordered" id="tab">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" >
<nav>
<ul class="pagination">
<!-- js
-->
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>이 페이지 기능 은 자바 의 3 층 구조 사상 을 사 용 했 습 니 다.각 층 이 각자 맡 은 일 을 하고 전단 부분 은 어 려 운 부분 입 니 다.처리 해 야 할 세부 사항 이 많 습 니 다.전단 은 ajax 와 jquery.jQuery 와 관련 된 문법 과 선택 기 와 관련 된 것 을 잘 연습 해 야 합 니 다.또한 bootrap 응답 식 개발 을 사용 하여 전단 페이지 의 구 조 를 더욱 편리 하 게 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
