前后端结合demo_前后端如何连接demo-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41421227/article/details/79662052

本文介绍了一个使用Java Servlet实现的简单宠物数据分页显示应用。该应用通过HTTP请求接收页码和每页显示的数量参数，从数据库中获取相应数据，并将其转换为JSON格式发送回前端。前端使用JavaScript进行页面渲染，支持翻页操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import Entity.petEntity;

import com.util.DAO.showAllPet;

public class pagination extends HttpServlet {

/**
* JspDome/servlet/pagination
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
showAllPet show=new showAllPet();
String page=request.getParameter("page");
String count=request.getParameter("count");
int pages=Integer.valueOf(page);
int counts=Integer.valueOf(count);
StringBuffer str=new StringBuffer("");
for(petEntity pet:show.showAllp(pages,counts)){
str.append("{\"health\":"+pet.getHealth()+",\"id\":"+pet.getId()+",\"love\":"+pet.getLove()+",\"name\":\""+pet.getName()+"\",\"strain\":\""+pet.getStrain()+"\"}.");
}//注意字符串一定要记得加"" 否则无法转json!!
str.append("");
str.deleteCharAt(str.lastIndexOf("."));
out.print(str);
out.flush();
out.close();
}

}

-----------------------------------------------------------------------------------
java 部分：
public List<petEntity> showAllp(int pages,int count){
String sql="select * from petsheet limit "+(pages-1)*count+","+count+"";
List<petEntity> list=new ArrayList<petEntity>();
ResultSet rs= getExectueQ(sql, null);

try {
while(rs.next()){
petEntity pet=new petEntity();
pet.setHealth(rs.getInt("health"));
pet.setId(rs.getInt("id"));
pet.setLove(rs.getInt("love"));
pet.setName(rs.getString("name"));
pet.setStrain(rs.getString("strain"));
pet.setPhoto(rs.getString("photo"));
list.add(pet);

}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

return list;
}

------------------------------------------------------------------------------
Hbuilder 部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="a">

</div>
<script type="text/javascript">
var pages=1;
var count=2;
//获取数据

//上一页
function downpage(){
pages--;
if(pages==1){
alert("已经到了第一页")
}
}

function addpage(){
pages++;
if(pages==8){
alert("已经到了最后一页")
}
a();
}
a();
function a(){

var ajax=new XMLHttpRequest();
ajax.open("POST","http://localhost:8080/JspDome/servlet/pagination",true);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send("page="+pages+"&count="+count);
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
var txts=ajax.responseText;
var arrs=txts.split(".");

// alert(typeof(txts))
var content="";
content+="<table id='tables1' >"
for(var i =0 ; i<arrs.length;i++){
var s= JSON.parse(arrs[i])

content+="<tr>"
content+="<td>"+s.health+"</td>"
content+="<td>"+s.id+"</td>"
content+="<td>"+s.love+"</td>"
content+="<td>"+s.name+"</td>"
content+="<td>"+s.strain+"</td>"
// content+="<td>"+texts[i].photo+"</td>"
content+="</tr>"
}
content+="<tr><td><a href='javascript:addpage();'>下一页</a>&nbsp<a href='javascript:downpage();'>上一页</a></td></tr>"
content+="</table>"
document.getElementById("a").innerHTML=content;
}
}

}
</script>
</body>
</html>