Ajax+BootStrap+Servlet连接数据库增删改查

Ajax连接数据库增删改查

1、创建web项目导入相关需要的jar包，和mysql的jar包

2、使用Ajax需要导入jquery的js库

3、导入Bootstrap库

4、MVC模式创建controller、dao、entity、service文件夹

5、创建连接池连接数据库DButils.java，和连接数据库的配置文件db.properties

package com.yongjie.ajaxweb.common.utils;
import com.alibaba.druid.pool.DruidDataSource;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.*;
import javax.sql.DataSource;
import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import java.util.Properties;

public class DButils {

    //声明一个连接池
    private static DataSource dataSource;

    //声明一个集合（配置信息）
    private static Properties config=new Properties();

    //初始化集合
    static {
        initData();
    }

    //初始化数据
    public static void initData(){
        try {
            //通过类加载器加载文件并获得输入流
            config.load( Thread.currentThread().getContextClassLoader().getResourceAsStream("com/yongjie/ajaxweb/db.properties")   );
        } catch (IOException e) {
            System.out.println("文件读取异常");
        }
    }

    //获得连接池的方法
    public static synchronized DataSource getDataSource() {

        if(dataSource == null){
            //实例化连接池
            DruidDataSource  ds = new DruidDataSource();
            //配置连接池
            ds.configFromPropety(config);
            //赋值
            dataSource = ds;
        }
        return  dataSource;
    }

    //获得连接对象的方法
    public  static Connection getConnection(){
        try {
            return  getDataSource().getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return  null;
    }


    //封装CURD 方法
    public static int  update(String sql, Object... args  ) throws SQLException {
        //执行器
        QueryRunner queryRunner = new QueryRunner( getDataSource() );
        return queryRunner.update(sql,args);
    }
    //插入并返回自增主键
    public static int  insert(String sql, Object... args  ) throws SQLException {
        //执行器
        QueryRunner queryRunner = new QueryRunner( getDataSource() );
        Object ID= queryRunner.insert(sql, new ScalarHandler<>() ,args);
        Long id=  Long.parseLong(ID.toString());
        return id.intValue();
    }

druid.url=jdbc:mysql://localhost:3306/fiendweb?useUnicode=true&characterEncoding=utf-8
druid.username=root
druid.password=root
druid.driverClassName=com.mysql.jdbc.Driver
druid.maxActive=20
druid.maxWait=2000

6、Ajax查询数据库数据。

1、创建 AjaxController.java文件和相关的到层service层，使用Servlet的get请求来 来查询数据。

private NoticeService service=null;
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setCharacterEncoding("utf-8");
    req.setCharacterEncoding("utf-8");
    resp.setContentType("application/json;charset=utf-8");
   service=new NoticeServiceImpl();
    //获取数据
   List<Notice>list=service.findAll();
    //将数据转换为json字符串
    String json = JSON.toJSONString(list);
    System.out.println(json);
    //将json字符串f发送到前端
    resp.getWriter().println(json);
}

2、Ajax前端接收后台的数据，由于后台使用的是get请求，所欲ajax获取数据的方式为get方式。注意不要忘记$.get()方法里加上，接收数据的格式，由于后台传送的是就送字符串，这里的格式为json

$.get('/ajax.do',function (data) {
  $('#tbDta').empty()
  $.each(data,function (i,n) {
    var tr=$(' ')
    var id=$(' ').text(n.id)
    var title=$(' ').text(n.title)
    var content=$(' ').text(n.content)
    var time=$(' ').text(n.ptime)
    var btn=$('+n.id+')"> 删除' +
            '+n.id+')"> 修改数据 ')
    tr.append(id,title,content,time,btn);
    $('#tblist tbody').append(tr)
  })

},'json')

7、Ajax添加数据。

1、前端使用Boostrap的模态框来实现输入的添加数据

2、后台创建NoticeAddController.java 以及相关的业务层，使用pot请求接收前端传来的添加数据

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setCharacterEncoding("utf-8");
    req.setCharacterEncoding("utf-8");
    resp.setContentType("application/json;charset=utf-8");
    //接收前端出来的字段数据
    String title= req.getParameter("title");
    String content= req.getParameter("content");
    Notice notice=new Notice();
    notice.setTitle(title);
    notice.setContent(content);
    //业务层添加数据的方法
    int row=  service.addNotice(notice);
    //返回给前端的添加状态响应
    if (row>0){
        resp.getWriter().println("{\"msg\":\"添加成功\"}");
    }else{
        resp.getWriter().println("{\"msg\":\"添加失败\"}");
    }
}

2、由于后台使用的post请求，所以ajax使用post方法$post()

$.post("/ajax.add",$('#addForm').serialize(),function (date) {
    //弹出后台响应的数据
  alert(date.msg)
  //关闭模态框
  $("#myModal").modal('hide');
},'json')

8、Ajax删除数据。

1、删除数据要考虑获取点击每条数据的删除按钮要获取这条数据的id。由于之前ajax获得所有的数据所以在那个方法每条数据上加一个按钮，并获取这条id

var btn=$('+n.id+')"> 删除'

2、在后台控制器创建NoticeDeleteController.java 以及相关的业务层。其主要的思想为，要获得前端的传来的id，然后调用删除的方法更具id删除。使用get请求

private NoticeService service=new NoticeServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setCharacterEncoding("utf-8");
    req.setCharacterEncoding("utf-8");
    resp.setContentType("application/json;charset=utf-8");
    //获取前端传来的id
   String id= req.getParameter("id");
   //业务层删除的方法
   int row= service.deleteNotice(Integer.parseInt(id));
   //删除响应返回给前端
   if (row>0){
       resp.getWriter().println("{\"msg\":\"删除成功\"}");
   }else{
       resp.getWriter().println("{\"msg\":\"删除失败\"}");
   }
}

3、前端Ajax使用get请求操作发送id和删除操作

$.get('/ajax.delete',{id:id},function (date) {
    //显示后台传来的响应数据
  alert(date.msg)
},'json')

9、Ajax修改数据数据。

1、主要思路为，需要获取的是修改那一条数据，就要获取该数据的id来查询该条数据，然后显示在修改框再来修改数据保存到数据库。使用BootStrap的模态框记录修改数据。点击修改数据，模态框要显示这条数据的当前内容
2、创建NoticeUpdateController.java及相关的业务层。由于修改数据需要两个步骤，一个是查询当前选中修改的数据，二是修改这条数据。所以查询数据使用get请求，修改数据使用post方法。一个请求同时操作两个请求。不需要在get里调用post方法，post方法调用get方法

/**修改数据
 * @author 13468
 */
@WebServlet("/ajax.update")
public class NoticeUpdateController extends HttpServlet {
    private NoticeService service=new NoticeServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        req.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf-8");
        String id=req.getParameter("id");
        //通过ID查询数据
        Notice notice= service.findNoticeById(Integer.parseInt(id));
      //转换成JSon数据
        String json = JSON.toJSONString(notice);
        //json数据格式的字符串发送到前端
        resp.getWriter().println(json);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        req.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf-8");
        //接收前端传来的字段数据
        String id=req.getParameter("id");
        String title= req.getParameter("title");
        String content= req.getParameter("content");
        Notice notice=new Notice();
        notice.setId(Integer.parseInt(id));
        notice.setTitle(title);
        notice.setContent(content);
        //业务层改方法
       int row= service.updateNotice(notice);
       //返回响应给前端
        if (row>0){
            resp.getWriter().println("{\"msg\":\"修改成功\"}");
        }else{
            resp.getWriter().println("{\"msg\":\"修改失败\"}");
        }
    }
}

3、前端需要点击修改数据按钮获取该数据的id，方便后台查询该数据显示在模态框中。就需要在获取全部数据的Ajax方法中加上获取id的值。在这里需要注意一下，修改数据按钮需要做两件事，1.获取id 2.弹出模态框。总结为点击弹出模态框需要传值。需要在这个按钮加一个监听事件来传这个id。BootStrap也有相应的方法

<button type="button" class="btn-danger"  data-toggle="modal"   data-target="#updatemyModal" onclick="Valus('+n.id+')"> 修改数据button>td> ')

然后在js中使用Ajax通过前端的id传入后台，后台查询数据返回给前端

function Valus(id) {
  $.get("/ajax.update",{id:id},function (data) {
         //获得数据id,通过id获取数据填入输入框
        $("#updateForm").find('input[name="id"]').val(id)
        $("#updateForm").find('input[name="title"]').val(data.title)
        $("#updateForm").find('textarea[name="content"]').val(data.content)
      },'json')
}

4、修改数据，后台使用过post强求接受的前端发送的数据，所以前端Ajax用$Post()方法。serialize()是序列化表单多余的数据

 $.post("/ajax.update",$("#updateForm").serialize(),function (data) {
      alert(data.msg)
    //关闭对话框
    $('#updatemyModal').modal('hide');
  },'json')
}