ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

基于Sevlet+JSP+JDBC+jQuery实现单页面的CURD

2021-09-21 22:32:47  阅读:138  来源: 互联网

标签:jQuery Sevlet obj resp req CURD book id out


做为对单页面的学习和后期框架的应用来说,掌握基本(原始)的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"
    )
})

标签:jQuery,Sevlet,obj,resp,req,CURD,book,id,out
来源: https://blog.csdn.net/tonysong111073/article/details/120406133

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有