JSP 페이징 예제의 json 구현 소개
- 高洛峰원래의
- 2016-12-29 15:22:08940검색
json은 이전 글에서 자세히 소개한 바 있습니다. json은 이해하기 쉽고 전송 속도도 빠릅니다. 그리고 자바스크립트와도 잘 통합될 수 있습니다.
jar를 추가하지 않고도 jsp 페이징 문제를 매우 잘 해결할 수 있습니다.
다음은 페이징 예제에 대한 자세한 소개입니다.
jsp+servlet 기술을 사용하면 그림과 같은 효과가 나타납니다.
첫 번째: javaBean을 작성합니다. User.java
package bean;
public class User {
private int id;
private String name;
private String password;
private int age;
public User() {
super();
}
public User(int id, String name, String password, int age) {
super();
this.id = id;
this.name = name;
this.password = password;
this.age = age;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
//{'id':1,'name':'zhangsan','password':'123','age':1}
return "{'id':"+id+",'name':'"+name+"','password':'"+password+"','age':"+age+"}";
}
}여기서 주목해야 할 것은 toString 메소드의 변경입니다.
그런 다음 제어 레이어와 Dao 레이어를 작성해 보겠습니다.
코드를 단순화하고 가치를 촉진하기 위해 획득하면 데이터베이스가 일시적으로 컬렉션으로 기록됩니다
보시다시피
1.service가 요청을 받고 현재 표시할 페이지(페이지 페이지)를 가져옵니다
2. 사용자가 데이터베이스 DB에서 순차적으로 얻은 데이터를 모두 추가합니다.
[{},{},{}]3. 이 문자열을 요청 페이지에 반환합니다.
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import bean.User;
public class Paging extends HttpServlet {
public static final int PER_PAGE = 3;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//分页 数据源 当前得到第几页的记录 每页显示多少条
int page = Integer.parseInt(request.getParameter("page"));
// page = 1 i = 0
//page = 2 3
int length = 0;//记录当前拿了多少条
StringBuffer sb = new StringBuffer();
sb.append("[");
//[{},{},{}]
String message = null;
if(page >= 1 && page <= 3){
for (int i = (page-1)*PER_PAGE; i < DB.list.size()&&length < PER_PAGE; i++) {
User u = DB.list.get(i);
sb.append(u.toString()+",");
length++;
}
if(length > 0){
message = sb.substring(0, sb.length()-1)+"]";
}else{
message = sb.toString()+"]";
}
}else{
response.setContentType("text/html;charset=utf-8");
response.getWriter().println("捣乱");
return;
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(message);
}
}
class DB{
public static List<User> list = new LinkedList<User>();
static{
list.add(new User(1,"zhangsan","zs",34));
list.add(new User(2,"lisi","ls",34));
list.add(new User(3,"a","h",34));
list.add(new User(4,"b","d",34));
list.add(new User(5,"c","g",34));
list.add(new User(6,"d","a",34));
list.add(new User(7,"e","d",34));
list.add(new User(8,"f","e",34));
list.add(new User(9,"g","a",34));
}
}: jsp를 작성하고 제출합니다. 페이지를 ajax를 통해 비동기적으로 가져온 다음 해당 문자열을 가져옵니다.
var mgs = xmlHttpRequest.responseText; var persons = mgs.evalJSON();
json 데이터를 구문 분석하고 표시된 영역에 추가합니다.
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'regist.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/prototype1.6.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
var paging = 0;
//
function page(p){
/*if(p == 'next' && paging < 3){
paging ++;
}else if(p == 'last' && paging > 1) {
paging --;
}else{
alert('错误');
}*/
if(p == 'next' && paging < 3){
paging ++;
if(paging > 1){
$(":button:eq(0)").removeAttr('disabled');
}
if(paging == 3){
$(":button:eq(1)").attr('disabled','disabled');
}
}else if(p == 'last' && paging > 1){
paging --;
$(":button:eq(1)").removeAttr('disabled');
if(paging == 1){
$(":button:eq(0)").attr('disabled','disabled');
}
}
createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=back;
var url = encodeURI("/json_page/Paging?page="+paging);
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//假设名字为xmlHttpRequest
function createXmlHttpRequest(){
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest = new XmlHttpRequest();
}
}
//回调函数
function back(){
if( xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var mgs = xmlHttpRequest.responseText;
var persons = mgs.evalJSON();
//alert(mgs);
$("table").empty();
$("table").append( $("<tr><td>id</td><td>用户名</td><td>密码</td><td>age</td></tr>"));
for(var i = 0 ; i < persons.length;i++){
var person = persons[i];
var $tr = $("<tr><td>"+person.id+"</td><td>"+person.name+"</td><td>"+person.password+"</td><td>"+person.age+"</td></tr>");
$("table").append($tr);
}
}
}
</script>
</head>
<body>
<input type="button" disabled="disabled" value="上一页" onclick="page('last');"/><input type="button" value="下一页" onclick = "page('next');"/>
<table>
<tr><td>id</td><td>用户名</td><td>密码</td><td>age</td></tr>
</table>
</body>
</html>추가로 다음 두 개의 j가 필요합니다
<script type="text/javascript" src="js/prototype1.6.js"></script> <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
jsp 페이징(렌더링 포함)의 json 구현에 대한 더 많은 예와 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.