做为对单页面的学习和后期框架的应用来说，掌握基本（原始）的ajax方式实现CRUD尤为重要，做为一个教学案例希望对读者（尤其是初学者）希望能够起到一个抛砖引玉的作用，有不对的地方，还请多多批评。
页面效果：
项目结构：
数据库：
DAO：
public interface IBookDao {
String FIND_ALL="SELECT * FROM t_book";
String ADD_BOOK="INSERT INTO t_book(title,author,price) VALUES(?,?,?)";
String UPDATE_BOOK="UPDATE t_book SET title=?,author=?,price=? WHERE id=?";
String FIND_BOOK="SELECT * FROM t_book WHERE id=?";
String DELETE_BOOK="DELETE FROM t_book WHERE id=?";
List<Book> findAll();
int add(Book book);
int update(Book book);
Book findById(int id);
int delete(int id);
}DAO实现：
public class BookDao implements IBookDao {
@Override
public List<Book> findAll() {
return BaseDao.findAll(FIND_ALL,Book.class);
}
@Override
public int add(Book book) {
return BaseDao.executeCommand(ADD_BOOK,book.getTitle(),book.getAuthor(),book.getPrice());
}
@Override
public int update(Book book) {
return BaseDao.executeCommand(UPDATE_BOOK,book.getTitle(),book.getAuthor(),book.getPrice(),book.getId());
}
@Override
public Book findById(int id) {
return BaseDao.findByObject(FIND_BOOK,Book.class,id);
}
@Override
public int delete(int id) {
return BaseDao.executeCommand(DELETE_BOOK,id);
}
}
Service：
public class BookService {
private final IBookDao bookDao = new BookDao();
public List<Book> findAll(){//传递
return this.bookDao.findAll();
}
public boolean save(Book book) {
System.out.println(".................."+book);
if(book.getId()==null || book.getId()==0){
return this.bookDao.add(book)==1;
}else{
return this.bookDao.update(book)==1;
}
}
public Book findById(int id) {
return this.bookDao.findById(id);
}
public boolean delete(int id){
return this.bookDao.delete(id)==1;
}
}Servlet：
@WebServlet(urlPatterns = {"/books","/save","/findById","/delete"})
public class BookAction extends HttpServlet {
private final BookService bookService =new BookService();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String url = req.getServletPath();
System.out.println(url);
switch (url){
case "/books": this.books(req,resp);break;
case "/save": this.save(req,resp); break;
case "/findById": this.findById(req,resp);break;
case "/delete":this.delete(req,resp);break;
}
}
private void books(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out = resp.getWriter();
out.print(JSON.toJSON(this.bookService.findAll()));
out.close();
}
private void save(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Map map= req.getParameterMap();
Book book=new Book();
try {
BeanUtils.populate(book,map);
PrintWriter out = resp.getWriter();
if(this.bookService.save(book)){
out.print(true);
}else{
out.print(false);
}
out.close();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
private void findById(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String sid=req.getParameter("id");
int id=Integer.parseInt(sid);
PrintWriter out = resp.getWriter();
out.print(JSON.toJSON(this.bookService.findById(id)));
out.close();
}
private void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String sid=req.getParameter("id");
int id=Integer.parseInt(sid);
PrintWriter out = resp.getWriter();
out.print(JSON.toJSON(this.bookService.delete(id)));
out.close();
}
}前台jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="inc.jsp"%>
<html>
<head>
<title>单页面CRUD</title>
<script src="js/book.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover">
</table>
<div id="save">
<form method="post">
<input type="hidden" name="id"><br>
书名：<input type="text" name="title"><br>
作者：<input type="text" name="author"><br>
价格：<input type="text" name="price"><br>
<button class="btn-success">保存</button>
</form>
</div>
</div>
</body>
</html>前台js：
$(function () {
$("#save").hide();//隐藏保存的div
$.get(
"books",
function (obj) {
//alert(typeof (obj));
console.log(obj);//保证是集合
$("table").append("<tr><td>编号</td><td>书名</td><td>作者</td><td>价格</td><td><button class='btn-info'>添加</button></td></tr>");
for(var i in obj){
$("table").append("<tr><td>"+obj[i].id+"</td><td>"+obj[i].title+
"</td><td>"+obj[i].author+"</td><td>"+obj[i].price+
"</td><td><button class='btn-warning' value='"+obj[i].id+"'>删除</button><button class='btn-primary' value='"+obj[i].id+"'>修改</button></td></tr>");
}
//添加
$(".btn-info").click(function () {
$("#save").fadeIn(2000);
})
//删除
$(".btn-warning").click(function () {
alert($(this).val());
if(confirm("确认吗？")){
$.get(
"delete?id="+$(this).val(),
function (obj) {
if(obj){
alert("OK");
location.reload();
}else{
alert("Sorry");
}
},"json"
)
}
})
//修改的回显
$(".btn-primary").click(function () {
alert($(this).val());
$.get(
"findById",
{id:$(this).val()},
function (obj) {
console.log(obj);
$("#save").fadeIn(2000);//显示修改的表单
//将各个属性的值回显到表单中
$("[name='id']").val(obj.id);//回显id
$("[name='title']").val(obj.title);//回显书名
$("[name='author']").val(obj.author);//回显作者
$("[name='price']").val(obj.price);//回显价格
},"json"
)
})
//保存
$(".btn-success").click(function () {
$.getJSON(
"save",
$("form").serialize(),//序列化表单
function (obj) {
if(obj){
alert("成功！");
location.reload();
}else{
alert("对不起，失败了！");
}
}
)
})
},"json"
)
})