Jsp+Ajax+Servlet+Mysql实现增删改查（一）

灰太狼 2021-09-20 22:58 248阅读 0赞

引言：我们通常在java  web开发中，通常使用表单提交，这种提交方式比较简单，但是如果我们想添加或者删除后提示一条添加成功，或者删除成功该如何实现呢，这个时候就需要ajax进行校验了。ajax提交form表单的好处就是可以得到一个返回值，那么服务端servlet如何回应一个字符串给ajax呢，这是个难点。本章节一我们演示增加记录，稍后的会逐步添加上。

--------------------

**1、实体类：**

package edu.jmi.model;

import java.io.Serializable;  
import java.sql.Date;

public class Admin implements Serializable\{  
      
    @Override  
    public String toString() \{  
        return "Admin \[id=" + id + ", username=" + username + ", password=" + password + ", creatTime=" + createTime  
                + ", status=" + status + "\]";  
    \}  
    public Integer getId() \{  
        return id;  
    \}  
    public void setId(Integer id) \{  
        this.id = id;  
    \}  
    public String getUsername() \{  
        return username;  
    \}  
    public void setUsername(String username) \{  
        this.username = username;  
    \}  
    public String getPassword() \{  
        return password;  
    \}  
    public void setPassword(String password) \{  
        this.password = password;  
    \}  
      
    public Integer getStatus() \{  
        return status;  
    \}  
    public void setStatus(Integer status) \{  
        this.status = status;  
    \}  
    private Integer id;  
    private String username;  
    private String password;  
    private Date createTime;  
    public Date getCreateTime() \{  
        return createTime;  
    \}  
    public void setCreateTime(Date createTime) \{  
        this.createTime = createTime;  
    \}  
    private Integer status;

--------------------

2、数据库连接

package edu.jmi.util;

import java.sql.Connection;  
import java.sql.DriverManager;

public class DBUtils \{  
    final static String DRIVER="com.mysql.jdbc.Driver";  
    final static String URL="jdbc:mysql://localhost:3306/meal?useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull";  
    final static String USER="root";  
    final static String PASSWORD="123456";  
    public static Connection getConnection()\{  
        try\{  
            Class.forName(DRIVER);  
            Connection connection=DriverManager.getConnection(URL,USER,PASSWORD);  
            System.out.println("连接成功数据库");  
            return connection;  
        \}catch(Exception e)\{  
            e.printStackTrace();  
            return null;  
        \}  
    \}  
      
    public static void closeConnection(Connection con)\{  
        try\{  
            con.close();  
        \}catch(Exception e)\{  
            e.printStackTrace();  
        \}  
    \}   
      
    public static void main(String\[\] args)\{  
        DBUtils db=new DBUtils();  
        DBUtils.getConnection();  
        //System.out.print(c);  
    \}

--------------------

3、Dao层

public boolean insert(Admin admin)\{  
            Connection c=null;  
            try\{  
                c=DBUtils.getConnection();  
                String sql="insert into admin(username,password,createTime,status) values (?,?,?,?)";  
                PreparedStatement pst=c.prepareStatement(sql);  
                pst.setString(1,admin.getUsername());  
                pst.setString(2, admin.getPassword());  
                pst.setString(3,String.valueOf(admin.getCreateTime()));  
                pst.setInt(4, admin.getStatus());  
              
                pst.execute();  
                return true;  
            \}catch(Exception e)\{  
                e.printStackTrace();  
                return false;  
            \}finally\{  
                DBUtils.closeConnection(c);  
            \}  
              
        \}

--------------------

4、表单

--------------------

5、js部分，记得引入jiquery的jar包

$(document).ready(function()\{  
      $("\#addButton").click(function()\{  
          $.ajax(\{  
                type: "post",  
                url: "<%=path %>/AdminServlet?method=insertAdmin",  
                data: $("\#addForm").serialize(),  
                dataType:'json',  
                success: function(data)\{  
                    console.log(data.type);  
                    console.log(data.status);  
                    if(data.type =="ok")\{  
                        alert("插入成功");  
                        window.location.href="<%=path%>/LoginServlet?method=FindAllAct";  
                    
                    \} else\{  
                        alert("插入失败");  
                    \}  
                \}  
            \});   
        \});

\});

</script>

--------------------

3、服务端servlet

private void insert(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException \{  
        request.setCharacterEncoding("utf-8");

AdminDao adminDao=new AdminDao();  
        Map<String, String> ret=new HashMap<String, String>();  
        String uname=request.getParameter("username");  
        String pwd=request.getParameter("password");  
          
        Date createTime=Date.valueOf(request.getParameter("createTime"));  
          
        Admin admin=new Admin();  
        admin.setUsername(uname);  
        admin.setPassword(pwd);  
        admin.setStatus(1);  
        admin.setCreateTime(createTime);  
        boolean b=adminDao.insert(admin);  
        System.out.println(b);  
        if(b==true)\{  
            ret.put("type", "ok");  
          response.getWriter().write(JSONObject.toJSONString(ret));  
            return;  
        \}else\{  
            response.sendRedirect("/WEB-INF/views/admin/addAdmin.jsp");  
        \}  
    \}

--------------------

6、效果图

ajax发出请求执行增加记录的数据，服务端通过response.getWriter.wirte(JSONobject.toJSONString(ret);返回一个OK，成功之后在执行刷新页面的servlet,