Jsp+Ajax+Servlet+Mysql實現增刪改查（一）

引言：我們通常在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、表單       

<form id="addForm" method="post" onSubmit="return add(this)">
                    <input class="form-control" name="username" type="text" placeholder="Enter full UserName">
                    <input class="form-control " name="password" type="text" placeholder="Enter full PassWord">       
                  <input  type="date" class="form-control "  name="createTime" />
                  <button class="btn btn-primary" id="addButton">OK</button>
              </form>

---

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

<script type="text/javascript">
      function add(form){
            if(form.username.value==""){
                alert("管理員用戶名不能爲空");
                form.username.focus();
                return false;
            }
            if(form.password.value==""){
                alert("管理員密碼不能爲空");
                form.password.focus();
                return false;
            }
  
  } 

$(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,