前端页面和数据库同步进行增删改查

回家几天，替去年此时的我写了一个样板，希望回来他们能够做起来。

前端页面

部分js代码，页面数据较少，就直接刷整个页面了。

$(".operate").click(function(){
//$(this)[0].innerHTML获取按钮上的字
    switch($(this)[0].innerHTML){
    case "添加":
    {
     var data1 = {"name": $("#name").val(),"sex": $("#sex").val(),"age":$("#age").val()};
//应该被fetch替代的ajax请求
      $.ajax({
      method: "POST",
      url: "/add",
      data:data1,
      contentType: "application/json; charset=utf-8"
    })
    .done(function( msg ) {
   if(msg === "添加"){
     window.location.reload();
    }
    });
      break;
    }
 })






后台uri

 
private static void sample(){
        get("/sample",new Sample()::get,engine);
        post("/add",new Sample()::addInfo);
    }



操作数据库。使用数据库方法的时候就已经连接了数据库，可能有些小伙伴会觉得，数据库没连接。
public class Sample extends Base {
    Logger log = Logger.getGlobal();
    public ModelAndView get(Request request, Response response) {
        String sqlStr = "select * from sample";
        List<Data> sample = query(sqlStr);
        attributes.put("sample",sample);
        return render("sample.html");
    }
    public String addInfo (Request request, Response response) {
        String str = request.body();
        String decodeStr = new String();
        try{
	//URL解码
            decodeStr = URLDecoder.decode(str, "utf-8");
        }catch(Exception e){
            log.info("add error:" + e.getMessage());
        }
        Map data = toMap(decodeStr);
        String name = data.get("name").toString();
        int age =  Integer.parseInt(data.get("age").toString());
        String sex = data.get("sex").toString();
        insert("sample",data().put("name",name).put("sex",sex).put("age",age));
        return "添加";
    }
}