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: