Các Phương Pháp Truyền Dữ Liệu Từ Backend Java Sang Frontend Web

Phương Thức 1: Sử Dụng JSON và AJAX

Xử Lý Dữ Liệu JSON Ở Phía Server

Khi làm việc với các ứng dụng web hiện đại, việc truyền dữ liệu dưới dạng JSON qua AJAX là phổ biến. Dưới đây là các kỹ thuật triển khai trong Java Servlet:

Trường hợp 1: Trả về mảng đơn giản

Với danh sách các giá trị cơ bản, bạn có thể xây dựng JSONArray trực tiếp:


JSONArray danhMucJson = new JSONArray();
danhMucJson.add("Điện thoại");
danhMucJson.add("Máy tính bảng");
danhMucJson.add("Phụ kiện");

String jsonChuoi = danhMucJson.toJSONString();
thanhGhiXuat.write(jsonChuoi);

Trường hợp 2: Trả về tập hợp đối tượng phức tạp

Có hai cách tiếp cận chính để chuyển đổi danh sách đối tượng Java:

Cách tiếp cận thứ nhất: Sử dụng List<Map>

Tạo cấu trúc dữ liệu lồng ghép với List chứa các Map, mỗi Map biểu diễn một đối tượng:


List<Map<String, Object>> tapHopDuLieu = new ArrayList<>();

for (NhanVien nhanVien : danhSachNhanVien) {
    Map<String, Object> banDoDuLieu = new HashMap<>();
    banDoDuLieu.put("maNhanVien", nhanVien.getMaNhanVien());
    banDoDuLieu.put("hoTenDem", nhanVien.getHoTenDem());
    banDoDuLieu.put("ten", nhanVien.getTen());
    banDoDuLieu.put("boPhan", nhanVien.getBoPhan());
    tapHopDuLieu.add(banDoDuLieu);
}

String chuoiJson = JSON.toJSONString(tapHopDuLieu);
boGhi.print(chuoiJson);
boGhi.flush();

Cách tiếp cận thứ hai: Sử dụng JSONArray và JSONObject

Xây dựng thủ công cấu trúc JSON bằng cách khởi tạo từng đối tượng JSON:


JSONArray mangDoiTuong = new JSONArray();

for (SanPham sp : catalogSanPham) {
    JSONObject doiTuong = new JSONObject();
    doiTuong.put("maSanPham", sp.getMaSanPham());
    doiTuong.put("tenMatHang", sp.getTenMatHang());
    doiTuong.put("donGia", sp.getDonGia());
    doiTuong.put("tonKho", sp.getSoLuongTon());
    mangDoiTuong.add(doiTuong);
}

String ketQua = JSON.toJSONString(mangDoiTuong);
luongRa.write(ketQua);
luongRa.flush();
luongRa.close();

Tiếp Nhận Dữ Liệu Ở Phía Client

Sử dụng jQuery AJAX hoặc Fetch API để lấy và xử lý JSON:


fetch('/du-lieu/json')
    .then(phanHoi => phanHoi.json())
    .then(duLieu => {
        duLieu.forEach(muc => {
            console.log('Mã:', muc.maNhanVien);
            console.log('Tên:', muc.hoTenDem + ' ' + muc.ten);
        });
    });

Phương Thức 2: Sử Dụng Đối Tượng Java Với EL và JSTL

Truyền Đơn Đối Tượng

Đặt thuộc tính vào request và truy cập qua Expression Language trong JSP:

Mã Servlet:


ThongTinCaNhan nguoiDung = new ThongTinCaNhan("NV2024", "Nguyen Van A", "nguyen.van.a@congty.com", "0987123456");
req.setAttribute("thongTin", nguoiDung);
req.getRequestDispatcher("/hien-thi.jsp").forward(req, resp);

Mã JSP:


<div class="profile">
    <label>Mã nhân viên: ${thongTin.maNhanVien}</label>
    <label>Họ tên: ${thongTin.hoVaTen}</label>
    <label>Email: ${thongTin.diaChiEmail}</label>
</div>

Truyền Danh Sách Đối Tượng

Khi hiển thị bảng dữ liệu, kết hợp JSTL <c:forEach> với EL:

Mã Servlet:


List<PhongBan> danhSachPhong = new ArrayList<>();
danhSachPhong.add(new PhongBan("PB01", "Kỹ thuật", 15));
danhSachPhong.add(new PhongBan("PB02", "Kinh doanh", 10));
danhSachPhong.add(new PhongBan("PB03", "Nhân sự", 8));
req.setAttribute("phongBanList", danhSachPhong);

Mã JSP:


<table border="1">
    <thead>
        <tr><th>Mã phòng</th><th>Tên phòng</th><th>Số lượng</th></tr>
    </thead>
    <tbody>
        <c:forEach items="${phongBanList}" var="phong">
            <tr>
                <td>${phong.maPhongBan}</td>
                <td>${phong.tenPhongBan}</td>
                <td>${phong.soNhanVien}</td>
            </tr>
        </c:forEach>
    </tbody>
</table>

Thẻ: ajax JSON JSTL Java Servlet JSP

Đăng vào ngày 28 tháng 7 lúc 03:56