案例：
页面放一个连接，当点击链接，向后端发送请求，最终显示到页面上。再次点击链接，信息隐藏。
效果：
demo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//$("#show_content").hide();
$("a").toggle(function() {
var url="ShowStuServlet";
$.post(url,function(data){
var jsonObj=eval(data);
//console.log(jsonObj);
var tab=$("<table border='1'><tr><td>编号</td><td>姓名</td><td>学号</td><td>爱好</td></tr></table>");
for(var i=0;i<jsonObj.length;i++){
var obj=jsonObj[i];
var tr=$("<tr><td>"+obj.id+"</td><td>"+obj.name+"</td><td>"+obj.sno+"</td><td>"+obj.hobby+"</td></tr>")
tab.append(tr);
}
//console.log(tab);
$("#show_content").append(tab);
$("#show_content").show();
})
},function(){
$("#show_content").hide();
$("#show_content").html("");
})
})
</script>
</head>
<body>
<a href="#">显示学生信息</a>
<div id="show_content" >
</div>
</body>
</html>
ShowStuServlet.java
package com.item.servlet;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import com.item.domain.Studen;
/**
* Servlet implementation class ShowStuServlet
*/
@WebServlet("/ShowStuServlet")
public class ShowStuServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
Studen stu=new Studen();
Studen stu2=new Studen();
stu.setId(1);
stu.setName("小明");
stu.setSno("123456");
stu.setHobby("篮球");
stu2.setId(2);
stu2.setName("小花");
stu2.setSno("22222");
stu2.setHobby("足球");
ArrayList<Studen>arr=new ArrayList<Studen>();
arr.add(stu);
arr.add(stu2);
//System.out.println(arr);
response.getWriter().print(JSONObject.toJSONString(arr));
}
/**
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
接下来通过查询数据库得到数据返回
ShowStuServlet.java
package com.item.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import com.item.dao.StudentDao;
import com.item.domain.Studen;
/**
* Servlet implementation class ShowStuServlet
*/
@WebServlet("/ShowStuServlet")
public class ShowStuServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
StudentDao studao=new StudentDao();
List<Studen> list;
try {
list = studao.getStu();
response.getWriter().print(JSONObject.toJSONString(list));
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
StudentDao.java
package com.item.dao;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.item.domain.Studen;
import com.item.utiles.C3P0Utiles;
public class StudentDao {
public List<Studen> getStu() throws SQLException{
QueryRunner queryRunner=new QueryRunner(C3P0Utiles.getDataSource());
String sql="select * from test";
List<Studen>list=queryRunner.query(sql,new BeanListHandler<>(Studen.class));
return list;
}
}
效果：
