Ajax + Gson vs Java: AJAX Insert Nhiều Bản Ghi Bằng Vòng Lặp For có RollBack Convert Array String Json sang ArrayList + Jsp Servlet vs JDBC + SQL Server [Eclipse]

-Tạo project File > New File > Other.. > Web > Dynamic Web Project

CREATE DATABASE MyDatabase
========================SQL Server======================
create table Employee
(
 id varchar(10) primary key,
 name nvarchar(50),
 [address] nvarchar(100),
 email nvarchar(50)
)

Download Driver SQL Server 

 Đọc thêm ở bài viết này

ConnectionFactory.java

Java Jsp/Servet 2017

package com.giaima.dbconnect;

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

public class ConnectionFactory {

    // static reference to itself
    private static ConnectionFactory instance = new ConnectionFactory();
    String url = "jdbc:sqlserver://localhost;databaseName=MyDatabase;useUn‌​icode=true;characterEncoding=UTF-8";
    String user = "sa";
    String password = "12345678";
    String driverClass = "com.microsoft.sqlserver.jdbc.SQLServerDriver";

    // private constructor
    private ConnectionFactory() {
        try {
            Class.forName(driverClass);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static ConnectionFactory getInstance() {
        return instance;
    }

    public Connection getConnection() throws SQLException, ClassNotFoundException {
        Connection connection = DriverManager.getConnection(url, user, password);
        return connection;
    }

    // Test connection database
//    public static void main(String[] args) throws ClassNotFoundException, SQLException {
//        System.out.println(getInstance().getConnection());
//    }
}

Test connect thành công!

CrudDAO.java

Java Jsp/Servet 2017

package com.giaima.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.List;

import com.giaima.dbconnect.ConnectionFactory;
import com.giaima.model.Employee;

public class CrudDAO {

    private Connection conn;
    private PreparedStatement pstmt;

    private static Connection getConnection() throws SQLException, ClassNotFoundException {
        Connection con = ConnectionFactory.getInstance().getConnection();
        return con;
    }

    public String insertEmployee(List<Employee> list) {
        String b = "true";
        String sql = "INSERT INTO Employee VALUES(?,?,?,?)";
        try {
            conn = getConnection();
            conn.setAutoCommit(false); //Set false
            pstmt = conn.prepareStatement(sql);
            // Insert nhiều bản ghi vào database có Rollback
            for (int i = 0; i < list.size(); i++) {
                pstmt.setString(1, list.get(i).getId());
                pstmt.setString(2, list.get(i).getName());
                pstmt.setString(3, list.get(i).getAddress());
                pstmt.setString(4, list.get(i).getEmail());
                pstmt.executeUpdate();
            }
            conn.commit(); // Thực hiển đưa dữ liệu lên database
        } catch (SQLException | ClassNotFoundException e) {
            if (conn != null) {
                try {
                    b = "Transaction is being rolled back";
                    conn.rollback(); //Rollback khi và chỉ khi dữ liệu đã có trong database hoặc cùng lúc insert vào nhiều bản ghi giống nhau..vv và còn nhiều lỗi nào đó thì rollback về trạng thái ban đầu
                } catch (SQLException excep) {
                    b = excep.getMessage();
                }
            }
        } finally {
            try {
                if (pstmt != null) {
                    pstmt.close(); //Đóng kết nối PreparedStatement
                }
                if (conn != null) {
                    conn.close(); //Đóng kết nối Connection database
                }
            } catch (SQLException e) {
                b = e.getMessage();
            }
        }
        return b;
    }
}

InsertAllRowTable.java

Java Jsp/Servet 2017

package com.giaima.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.giaima.dao.CrudDAO;
import com.giaima.model.Employee;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

@WebServlet("/InsertAllRowTable")
public class InsertAllRowTable extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String[] json = request.getParameterValues("json[]"); //Lấy dữ liệu kiểu array từ ajax gửi về --> data : {json : array}
        // [Ljava.lang.String;@6feb631e  <-- json
        
        Gson gson = new GsonBuilder().create();
        List<Employee> listEmp = new ArrayList<Employee>();

        for (int i = 0; i < json.length; i++) {
            // {id:"1001",name:"Antonio",address:"MozaTug",email:"antoni@gmail.com"} <-- json[1].toString()
            // {id:"1002",name:"Hakiazti",address:"Nubug",email:"hankia@gmail.com"}  <--  json[2].toString()
            Employee employeList = gson.fromJson(json[i].toString(), Employee.class);
            listEmp.add(employeList); //Add từng object của Employee vào arrayList<Employee>
        }
        for (Employee emp : listEmp) {
            /* output arraylist hiển thị ra màn hinh console test */
            System.out.println("Id: " + emp.getId() + " Name: " + emp.getName() + " Address: " + emp.getAddress() + " Email: " + emp.getEmail());
        }
        // Nếu arraList tồn tại thì gọi Dao tìm method InsertEmployee đưa listEmp vào lặp insert nhiều bản ghi vào Database cùng một lúc (có rollback)
        if (!listEmp.isEmpty()) {
            CrudDAO dao = new CrudDAO();
            String insert = dao.insertEmployee(listEmp); //Insert to database
            if ("true".equalsIgnoreCase(insert)) {
                PrintWriter out = response.getWriter();
                response.setContentType("application/json");
                out.write("{\"check\":\"" + insert + "\"}");
                out.flush();//Đưa chuỗi json này về Ajax để thực hiện hành vi check true
            } else {
                PrintWriter out = response.getWriter();
                response.setContentType("application/json");
                out.write("{\"check\":\"" + insert + "\"}");
                out.flush();//Đưa chuỗi Json này về Ajax để thực hiện hiển thị cảnh báo lỗi SQL cho Client
            }
        }
    }
}

Employee.java

Java Jsp/Servet 2017

package com.giaima.model;

public class Employee {

    private String id;
    private String name;
    private String address;
    private String email;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Employee(String id, String name, String address, String email) {
        super();
        this.id = id;
        this.name = name;
        this.address = address;
        this.email = email;
    }

    public Employee() {
        super();
    }
}

index.jsp

Java Jsp/Servet 2017

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert Employee</title>
        <script src="js/jquery-1.10.0.js"></script>
        <script src="js/ajaxEmployee.js"></script>
        <style type="text/css">
            th {
                background: rgba(0, 135, 255, 0.46);
            }

            .text-center {
                text-align: center;
            }

            .trOnColor {
                background: rgba(0, 121, 128, 0.23);
            }
        </style>
    </head>
    <body>
        <h2>Ajax insert all row</h2>
        <hr/>
        <table>
            <tr>
                <td>ID:</td>
                <td><input type="text" id="id" name="id"></td>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input type="text" id="name" name="name"></td>
            </tr>
            <tr>
                <td>Address:</td>
                <td><input type="text" id="address" name="address"></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input type="text" id="email" name="email"></td>
            </tr>
            <tr>
                <td>
                    <input type="button" class="add" value="Add" /> 
                    <input type="button" class="delete" value="Delete" />
                </td>
                <td> 
                    <input type="button" class="save" value="Save to database" />
                </td>
            </tr>

        </table>
        <hr/>
        <p id="message" align="left"></p>
        <table border="1px" width="500px">
            <thead>
                <tr>
                    <th>No</th>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody id="row">
            </tbody>
        </table>
    </body>
</html>

ajaxEmployee.js

Java Jsp/Servet 2017

$(function () {
    $('.add').click(function () {
        var table = document.getElementById("row");

        var trLength = table.getElementsByTagName("tr").length;

        var row = table.insertRow(trLength);

        var cell = row.insertCell(0);
        var cell1 = row.insertCell(1);
        var cell2 = row.insertCell(2);
        var cell3 = row.insertCell(3);
        var cell4 = row.insertCell(4);

        // Gán value người nhập vào cột của table
        cell.innerHTML = trLength;
        cell1.innerHTML = $('#id').val(); //Cú pháp lấy value jquery $('#id').val()
        cell2.innerHTML = $('#name').val();
        cell3.innerHTML = $('#address').val();
        cell4.innerHTML = $('#email').val();

        // Thêm class vào tr
        row.className += 'trOnColor'; //class có tên trOnColor
        // Thêm class vào td
        cell.className += 'text-center';
        // Thêm class vào td tạo kích thước width cho từng cột
        cell1.className += 'text-center';
        cell2.className += 'text-center';
        cell3.className += 'text-center';
        cell4.className += 'text-center';
    });
    $('.delete').click(function () {
        // e.preventDefault(); //Dùng trong trường hợp click trên form có liên quan đến action
        var msg = confirm("Are you sure?");

        if (msg) {
            var table = document.getElementById("row");
            var trLength = table.getElementsByTagName("tr").length;
            table.deleteRow(trLength - 1);
        }
    });
    $('.save').click(function () {
        // Call function
        var array = [];

        arrayData(array);

        $.ajax({
            type: "POST",
            /* contentType : "application/json; charset=utf-8", */
            url: "InsertAllRowTable",
            data: {json: array}, //sau khi chạy hàm arrayData(array) thì array đã có dữ liệu tất cả các row trên table
            dataType: "json",
            success: function (result) {
                if (result.check == "true") {
                    $('#message').text("Insert Success!"); // Ghi value vào id
                    // message
                    $('#message').css('color', 'blue');
                } else {
                    $('#message').text(result.check); // Ghi cảnh báo lỗi vào
                    // id message
                    $('#message').css('color', 'red');
                }
            }
        });

    });

});
function arrayData(array) {
// Vòng lặp lấy all value trên table add vào array
    $('#row tr').each(
            function () {
                var id = this.cells[1].innerHTML;
                var name = this.cells[2].innerHTML;
                var address = this.cells[3].innerHTML;
                var email = this.cells[4].innerHTML;
                var string = '{id:"' + id + '",name:"' + name + '",address:"' + address + '",email:"' + email + '"}';
                array.push(string);
            });
}

Note: Các bạn nhớ download hỗ trợ chạy Jquery: jquery-1.10.0.js
RUN App: 

Read More

Ajax + Gson vs Java: AJAX Search và hiển thị Table + Jsp Servlet vs SQL Server [Eclipse]

-Tạo project File > New File > Other.. > Web > Dynamic Web Project

CREATE DATABASE MyDatabase
========================SQL Server======================
create table Employee
(
 id varchar(10) primary key,
 name nvarchar(50),
 [address] nvarchar(100),
 email nvarchar(50)
)

Download Driver SQL Server 

 Đọc thêm ở bài viết này

ConnectionFactory.java

Java Jsp/Servet 2017

package com.giaima.dbconnect;

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

public class ConnectionFactory {

    // static reference to itself
    private static ConnectionFactory instance = new ConnectionFactory();
    String url = "jdbc:sqlserver://localhost;databaseName=MyDatabase;useUn‌​icode=true;characterEncoding=UTF-8";
    String user = "sa";
    String password = "12345678";
    String driverClass = "com.microsoft.sqlserver.jdbc.SQLServerDriver";

    // private constructor
    private ConnectionFactory() {
        try {
            Class.forName(driverClass);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static ConnectionFactory getInstance() {
        return instance;
    }

    public Connection getConnection() throws SQLException, ClassNotFoundException {
        Connection connection = DriverManager.getConnection(url, user, password);
        return connection;
    }

    // Test connection database
//    public static void main(String[] args) throws ClassNotFoundException, SQLException {
//        System.out.println(getInstance().getConnection());
//    }
}

Test connect thành công!

CrudDAO.java

Java Jsp/Servet 2017

package com.giaima.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import com.giaima.dbconnect.ConnectionFactory;
import com.giaima.model.Employee;

public class CrudDAO {

    private Connection conn;
    private PreparedStatement pstmt;
    private ResultSet rs;

    private static Connection getConnection() throws SQLException, ClassNotFoundException {
        Connection con = ConnectionFactory.getInstance().getConnection();
        return con;
    }

    public ArrayList<Employee> searchEmployee(String name) {
        ArrayList<Employee> list = new ArrayList<Employee>();
        String sql = "SELECT * FROM Employee WHERE name = ?";
        try {
            conn = getConnection();
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, name);
            rs = pstmt.executeQuery();
            Employee empl = new Employee();
            while (rs.next()) {
                empl.setId(rs.getString("id"));
                empl.setName(rs.getString("name"));
                empl.setAddress(rs.getString("address"));
                empl.setEmail(rs.getString("email"));
                list.add(empl);
            }
        } catch (SQLException | ClassNotFoundException e) {
            e.printStackTrace();
        } finally {
            try {
                if (pstmt != null) {
                    pstmt.close();
                }
                if (conn != null) {
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        return list; //Trả kết quả về List
    }

}

SearchEmployee.java

Java Jsp/Servet 2017

package com.giaima.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.giaima.dao.CrudDAO;
import com.giaima.model.Employee;
import com.google.gson.Gson;

/**
 * Servlet implementation class SearchEmployee
 */
@WebServlet("/SearchEmployee")
public class SearchEmployee extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public SearchEmployee() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String name = request.getParameter("name");
        CrudDAO dao = new CrudDAO();
        ArrayList<Employee> list = dao.searchEmployee(name);

        if (!list.isEmpty()) {

            PrintWriter out = response.getWriter();
            response.setCharacterEncoding("UTF8");
            response.setContentType("application/json");
            //Import gson-2.2.2.jar
            Gson gson = new Gson();
            String objectToReturn = gson.toJson(list); //Convert List -> Json
            out.write(objectToReturn); //Đưa Json trả về Ajax
            out.flush();

        } else {
            PrintWriter out = response.getWriter();
            response.setCharacterEncoding("UTF8");
            response.setContentType("application/json");
            out.write("{\"check\":\"fail\"}");
            out.flush();
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

}

Employee.java

Java Jsp/Servet 2017

package com.giaima.model;

public class Employee {

    private String id;
    private String name;
    private String address;
    private String email;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Employee(String id, String name, String address, String email) {
        super();
        this.id = id;
        this.name = name;
        this.address = address;
        this.email = email;
    }

    public Employee() {
        super();
    }

}

index.jsp

Java Jsp/Servet 2017

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Search Employee</title>
        <script src="js/jquery-1.10.0.js"></script> //Thư việc hỗ trợ Jquery không được thiếu
        <script src="js/ajaxEmployee.js"></script>
        <style type="text/css">
            th{ //Css cho thẻ <th> phần t head
                background: rgba(0, 135, 255, 0.46);
            }
            .text-center{ //Css cho các class mới tạo bằng Jquery trong thẻ <td>
                text-align: center;
            }
            .trOnColor{ //Css cho class mới tạo bằng Jquery trong thẻ <tr>
                background: rgba(0, 121, 128, 0.23);
            }
        </style>
    </head>
    <body>
        <p id="message" align="left"></p>//Hiển thị thông báo không tìm thấy bản ghi 
            Name<input type="text" id="name" name="name"/> 
            <input type="button" class="search" value="Search" />
        <table border="1px" width="500px">
            <thead>
                <tr>
                    <th>No</th>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody id="row"> //Dữ liệu sẽ được thêm mới bằng việc thêm các thẻ <tr> <td> và giá trị bắt đầu từ id=row
            </tbody>
        </table>
    </body>
</html>

ajaxEmployee.js

Java Jsp/Servet 2017

$(function () {

    $('.search').click(function () {
        var name = $("#name").val();
        $.ajax({
            type: "GET",
            url: "SearchEmployee", //Tên servlet
            data: "name=" + name,  //Gán giá trị vào name mục đich để servlet nhận được Parameter
            dataType: "json",
            async: true,
            cache: false,
            success: function (result) {
                //Lấy size của list này
                var listSize = Object.keys(result).length;
                //Nếu List lấy từ Dao là null thì thông báo Not found và return
                if (result.check == "fail") {
                    $('#message').text("List isEmpty! Name not found!");
                    $('#message').css('color', 'red');
                    return;
                }
                //Nếu list tồn tại thì reset thông điệp cảnh báo về rỗng và loop dữ liệu hiển thị ra table
                if (listSize > 0) {
                    $('#message').text("");
                    //Khai báo table kiểu global để sử dụng ngoài fuction này
                    table = document.getElementById("row");
                    for (i = 0; i < listSize; i++) {
                        var row = table.insertRow(i);

                        var cell = row.insertCell(0);
                        var cell1 = row.insertCell(1);
                        var cell2 = row.insertCell(2);
                        var cell3 = row.insertCell(3);
                        var cell4 = row.insertCell(4);

                        cell.innerHTML = i;
                        cell1.innerHTML = result[i].id;
                        cell2.innerHTML = result[i].name;
                        cell3.innerHTML = result[i].address;
                        cell4.innerHTML = result[i].email;

                        // Thêm class vào tr
                        row.className += 'trOnColor';// class có tên trOnColor
                        // Thêm class vào td
                        cell.className += 'text-center'; // Class có tên text-center
                        // Thêm class vào td tạo kích thước width cho từng cột
                        cell1.className += 'text-center';
                        cell2.className += 'text-center';
                        cell3.className += 'text-center';
                        cell4.className += 'text-center';

                    }
                }

            }
        });
    });
    //Reset table về trạng thái không có bản ghi nào
    $('.search').click(function () {
        var trLength = table.getElementsByTagName("tr").length;
        if (trLength > 0) {
            for (i = 0; i < trLength; i++) {
                table.deleteRow(0);
            };
        }
    });
});

Note: Các bạn nhớ download hỗ trợ chạy Jquery: jquery-1.10.0.js
RUN App: 

Database

Read More

Ajax vs Java: AJAX Insert Form + Jsp Servlet vs SQL Server [Eclipse]

-Tạo project File > New File > Other.. > Web > Dynamic Web Project

CREATE DATABASE MyDatabase
========================SQL======================
create table Employee
(
 id varchar(10) primary key,
 name nvarchar(50),
 [address] nvarchar(100),
 email nvarchar(50)
)

Download Driver SQL Server 

 Đọc thêm ở bài viết này

ConnectionFactory.java

Java Jsp/Servet 2017

package com.giaima.dbconnect;

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

public class ConnectionFactory {

    // static reference to itself
    private static ConnectionFactory instance = new ConnectionFactory();
    String url = "jdbc:sqlserver://localhost;databaseName=MyDatabase;useUn‌​icode=true;characterEncoding=UTF-8";
    String user = "sa";
    String password = "12345678";
    String driverClass = "com.microsoft.sqlserver.jdbc.SQLServerDriver";

    // private constructor
    private ConnectionFactory() {
        try {
            Class.forName(driverClass);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static ConnectionFactory getInstance() {
        return instance;
    }

    public Connection getConnection() throws SQLException, ClassNotFoundException {
        Connection connection = DriverManager.getConnection(url, user, password);
        return connection;
    }

    // Test connection database
//    public static void main(String[] args) throws ClassNotFoundException, SQLException {
//        System.out.println(getInstance().getConnection());
//    }
}

Test connect thành công!

CrudDAO.java

Java Jsp/Servet 2017

package com.giaima.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.giaima.dbconnect.ConnectionFactory;
import com.giaima.model.Employee;

public class CrudDAO {

    private Connection conn;
    private PreparedStatement pstmt;
    private ResultSet rs;

    private static Connection getConnection() throws SQLException, ClassNotFoundException {
        Connection con = ConnectionFactory.getInstance().getConnection();
        return con;
    }

    public String insertEmployee(Employee empl) {
        String b = "true";
        String sql = "INSERT INTO Employee VALUES(?,?,?,?)";
        try {
            conn = getConnection();
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, empl.getId());
            pstmt.setString(2, empl.getName());
            pstmt.setString(3, empl.getAddress());
            pstmt.setString(4, empl.getEmail());
            pstmt.executeUpdate();
        } catch (SQLException | ClassNotFoundException e) {
            b = e.getMessage(); //Return string vể ajax đưa ra cảnh báo lỗi SQL cho Client
        } finally {
            try {
                if (pstmt != null) {
                    pstmt.close();//Phần này liên quan tới insert nhiều lần bằng vòng lặp tôi chưa đề cập
                }
                if (conn != null) {
                    conn.close();//Phần này liên quan tới conn.rollback() về ban đầu coi như không có lần thực hiện nào với Database thành công tôi chưa đề cập
                }
            } catch (SQLException e) {
                b = e.getMessage();
                e.printStackTrace();
            }
        }

        return b;
    }

}

addEmployee.java

Java Jsp/Servet 2017

package com.giaima.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.giaima.dao.CrudDAO;
import com.giaima.model.Employee;

/**
 * Servlet implementation class addEmployee
 */
@WebServlet("/addEmployee")
public class addEmployee extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public addEmployee() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        String address = request.getParameter("address");
        String email = request.getParameter("email");

        CrudDAO dao = new CrudDAO();
        Employee empl = new Employee(id, name, address, email);

        String b = dao.insertEmployee(empl);
        if ("true".equals(b)) {
            PrintWriter out = response.getWriter();
            response.setContentType("application/json");
            out.write("{\"check\":\"true\"}");
            out.flush();//Đưa chuỗi json này về Ajax để thực hiện hành vi check true
        } else {
            PrintWriter out = response.getWriter();
            response.setContentType("application/json");
            out.write("{\"check\":\"" + b + "\"}");
            out.flush();//Đưa chuỗi Json này về Ajax để thực hiện hiển thị cảnh báo lỗi SQL cho Client
        }
    }
}

Employee.java

Java Jsp/Servet 2017

package com.giaima.model;

public class Employee {

    private String id;
    private String name;
    private String address;
    private String email;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Employee(String id, String name, String address, String email) {
        super();
        this.id = id;
        this.name = name;
        this.address = address;
        this.email = email;
    }

    public Employee() {
        super();
    }

}

index.jsp

Java Jsp/Servet 2017

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Add Employee</title>
        <script src="js/jquery-1.10.0.js"></script>//Cần có để chương trình hiểu và chạy được ngôn ngữ Jquery vs ajax
        <script src="js/ajaxEmployee.js"></script>
    </head>
    <body>
        <p id="message" align="left" ></p> //Hiển thị thông báo
        <form id="addForm" >
            <input type="text" id="id" name="id"/>ID<br/>
            <input type="text" id="name" name="name"/>Name<br/>
            <input type="text" id="address" name="address"/>Address<br/>
            <input type="text" id="email" name="email"/>Email<br/>
            <input type="button" class="add" value="ADD"/>
        </form>
    </body>
</html>

ajaxEmployee.js

Java Jsp/Servet 2017

$(function () {

    $('.add').click(function () {

        var formData = $("#addForm").serialize(); //Lấy tất cả data trong form
        $.ajax({
            type: "POST", //với servlet thì sẽ đi vào method doPost
            url: "addEmployee", //Tên của class Servlet
            cache: false,
            data: formData,
            success: function (result) {
                if (result.check == "true") {
                    $('#message').text("Insert Success!"); //Ghi value vào id message
                    $('#message').css('color', 'blue');
                } else {
                    $('#message').text(result.check); //Ghi cảnh báo lỗi vào id message
                    $('#message').css('color', 'red');
                }
            }
        });
    });

});

Note: Các bạn nhớ download hỗ trợ chạy Jquery: jquery-1.10.0.js
RUN App: 

Read More