前言

      在自学web的时候看到那些什么el,jstl和什么什么的模板我头皮都发麻,这个学期学的web.我就在想,如果老师让我们自己写个东西,那是肯定可以的,但是如果让我用模板做前后端交互,还不如让我只写后端,因为我实在是对那些什么什么模板之类的不感冒.虽然我不用模板,但是我可以用jq,用ajax啊!!!现在都是讲究前后端分离的,不是说模板不好,只是说对于我这个前后端不太分离的来说不习惯而已.不多说,

---

开搞

这是我的项目结构

1.在写前后端分离的时候要保证数据库,dao层,service层是通的

/*dao层我用dbutils*/
//用来查找全部
@Override
public List<Book> findAll() {
    try {
        sql = "select b.id,b.book_name,b.number,b.price from book b ;";
        return qr.query(conn, sql, new BeanListHandler<Book>(Book.class));
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return null;
}

/*service层*/
//用来查找全部
private BookImpl bookImpl = new BookImpl();

public List<Book> findAll() {
    return bookImpl.findAll();
}

    /*controller层,从数据库拿到数据,进行响应*/
    private BookService bookService = new BookService();
    private JSONObject jb = new JSONObject();
    private PrintWriter pw;

    public void findAll(HttpServletRequest req,HttpServletResponse resp) {
        resp.setContentType("text/html;charset=utf-8");//用于解决json返回中文乱码
        List<Map<String, String>> list = new ArrayList<Map<String, String>>();//存储返回的map集合对象
        List<Book> findAll = bookService.findAll();//从service层拿到数据
        for (Book book : findAll) {
            Map<String, String> map = new HashMap<>();//存储返回的对象
            map.put("id", String.valueOf(book.getId()));
            map.put("bookName", book.getBook_name());
            map.put("number", String.valueOf(book.getNumber()));
            map.put("price", String.valueOf(book.getPrice()));
            list.add(map);//封装到list集合中
        }
        try {
            jb.put("list", list);//将list集合封装成json串
            pw = resp.getWriter();//拿到响应要写入的类
            pw.append(jb.toString());//把封装好的东西添加到写入的类中,可以写到浏览器中
            pw.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

2.前端的ajax请求

function initData() {
        $.get("${pageContext.request.contextPath}/findAll?method=findAll", function(data) {
            console.log(data.list);
                        input(data.list);//用于局部刷新
        }, "json");
    }

前端响应的数据

3.开始局部刷新

    function input(num){
        var number,id,bookName,check,price;
        num.forEach(item => {
            id=$("<td></td>").append(item.id);//制造一个填装id的td
            number=$("<td></td>").append(item.number);//制造一个填装number的td
            bookName=$("<td></td>").append(item.bookName);//制造一个填装bookName的td
            price=$("<td></td>").append(item.price);//制造一个填装price的td
            //制造一个填装一个button的td
            check=$("<td></td>").append('<button style="margin-bottom: 10%;font-size: 50%;background:transparent;border-width:0px;" alt="'+item.id+'" class="by">图书详情</button>');
            //把所有的td都填装进tr里,然后将tr填装进  id=table 的table标签中
            $("<tr></tr>").append(id).append(bookName).append(price).append(number).append(check).appendTo("#table")
        })
    }

渲染的结果