Hướng dẫn Jquery AJAX tải dữ liệu khi được yêu cầu

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,663
Được Like
10,931
Jquery AJAX tải dữ liệu khi được yêu cầu

Bài viết này sẽ hướng dẫn các bạn sử dụng Jquery AJAX để tải dữ liệu khi người dùng yêu cầu.

Nếu bạn nào mới làm quen với Jquery AJAX thì các bạn hãy xem lại các bài viết hướng dẫn cách sử dụng Jquery AJAX để load dữ liệu nhé.

Hình ảnh, database, demo được đính kèm trong tập tin đính kèm.

Đối với những trang web bán hàng hiện đại nói riêng hay những trang web khác nói chung thì việc áp dụng công nghệ AJAX để tải dữ liệu từ server là rất cần thiết.

Khi bạn làm một trang web bán hàng, bạn có một sidebar hiện danh mục sản phẩm và main chính sẽ hiển thị tất cả sản phẩm của cty mình đang có. Bình thường các bạn làm thì cần phải truyền tham số qua link rồi ở trang sản phẩm mình phải GET tham số đấy rồi SELECT với database…Mà mình GET tham số trên link thì nó cũng không được tốt cho lắm, thay vào nó bây giờ mình sử dụng Jquery AJAX để xử lý nó một cách dễ dàng và đơn giản hơn ^^.

Bởi vì đây là bài hướng dẫn cho nên mình muốn loại bỏ một số hình thức làm sạch, chuyển đổi dạng dữ liệu và tránh hack SQL Injection, cho nên mình có 1 số lưu ý khi các bạn viết code PHP như sau nếu bạn muốn sử dụng vào project của mình:
  • Tránh sử dụng SELECT * .. khi mình CSDL mình chỉ có 2 hoặc 3 trường nó sẽ xuất ra những dữ liệu mình không cần dùng đến
  • Trong khi phát triển project thì bạn nên thêm các trường hợp bẫy lỗi vào để tiện cho việc tìm kiếm lỗi nhanh hơn
  • VALIDATE các hộp thoại input và string để chống SQL Injection
Bước 1 – SETUP HTML
Mã:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Jquery AJAX Loading data when requested</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
    <script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
    <script type="text/javascript" src="js/AJAX.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="container">
            <div id="nav">
                <h1>Loading data when requested</h1>
                <nav role="tab">
                    <ul>
                        <?php
                        $db = mysqli_connect("localhost","root","","ajax_tab");
                        $query_tab = "SELECT * FROM categories";
                        $result_tab = mysqli_query($db,$query_tab)
                        or die("mysqli Error: " . mysqli_error($db));
                        if(mysqli_num_rows($result_tab) > 0) {
                            while($rows = mysqli_fetch_array($result_tab,MYSQLI_ASSOC)) {
                                $id_cat = $rows['cat_id'];
                                $name_cat = $rows['name'];
                                echo "<li id_cat='$id_cat'>$name_cat</li>";
                            }   
                        }
                        ?>
                    </ul>
                </nav>
            </div><!-- End #nav -->
 
            <div id="main">
                <div id="loading"></div>
                <div id="data"></div>
            </div>
            
        </div><!-- End #container --> 
    </div><!-- End #wrapper -->
</body>
</html>

Trong phần HTML của mình cũng không có gì nhiều, mình chỉ cho nó hiển thị cái danh mục bài viết ra và ở dưới có 1 div với id là data để load dữ liệu vào đó, nhưng ở đây các bạn chú ý ở đoạn mình echo ra nhé. Trong cái thẻ li mình có truyền cho nó vào một tham số là id_cat và mỗi danh mục của mình trong databse tương ứng nó sẽ có id khác nhau và chút xíu nữa khi mình click vào một danh mục nào đó mình lấy cái id này để SELECT tất cả những bài viết nằm trong danh mục đó.

Code PHP trên mình viết đơn giãn cho các bạn dễ hiểu hơn, khi áp dụng vào project bạn cần làm một số cái mình nói ở trên và mình có thể rút gọn code một chút nữa.
Mã:
<?php
    $db = mysqli_connect("localhost","root","","ajax_tab");
    $query_tab = "SELECT cat_id,name FROM categories";
    $result_tab = mysqli_query($db,$query_tab);
    while(list($id_cat,$name_cat) = mysqli_fetch_array($result_tab,MYSQLI_NUM)) {
        echo "<li id_cat='$id_cat'>$name_cat</li>";
    }
?>

Mình có thể dùng hàm list() để gán biến và lấy giá trị luôn cho nó lẹ hì, đỡ mất công phải gán từng cái cho mệt.

Khi mình dùng hàm list() chạy qua từng biến thì biến của mình cần viết theo thứ tự nhé, trong CSDL của mình trường cat_id có row = 0, name_cat có row = 1 và mình phải gán biến theo thứ tự $id_cat = 0 => trường cat_id, $name_cat = 1 => trường name_cat. Khi mình dùng mysqli_fetch_array thì mình thêm một tham số nữa là MYSQLI_NUM để nó chuyển cái mảng này thành dạng số để hàm list() của mình chạy qua từng cái và gán vào biến luôn ha.

Bước 2 – SETUP CSS
Mã:
*{margin: 0; padding: 0; }
 
body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif; 
}
 
a {
    text-decoration: none;
}
 
#wrapper {
    width: 1000px;
    margin: 0 auto;
}
 
#container {
    width: 1000px;
    overflow: hidden;
}
 
#nav {
    margin: 20px;
    border: 1px solid #d4d4d4;
    background: -moz-linear-gradient(top,#fff,#ebebeb);
    background: -webkit-linear-gradient(top,#fff,#ebebeb);
    background: -o-linear-gradient(top,#fff,#ebebeb);
    background: -ms-linear-gradient(top,#fff,#ebebeb);
    width: 290px;
    padding: 20px;
    float: left;
}
 
#nav h1{
    font-size: 1.4em;
    border-bottom: 1px solid #d4d4d4;
    padding-bottom: 10px;
    text-align: center;
    color: green;
    text-shadow: 0px 1px 0px #d4d4d4;
}
 
nav[role="tab"] {
    padding-top: 10px;
}
 
nav[role="tab"] > ul li {
    font-size: 1.4em;
    border-bottom: 1px solid #d4d4d4;
    padding: 5px 0px;
    color: #ac0202;
    cursor: pointer;
}
 
nav[role="tab"] > ul li:hover {
    color: #888;
}
 
nav[role="tab"] > ul li:last-child {
    border-bottom: none;
}
 
#main {
    border: 1px solid #d4d4d4;
    background: -moz-linear-gradient(top,#fff,#ebebeb);
    background: -webkit-linear-gradient(top,#fff,#ebebeb);
    background: -o-linear-gradient(top,#fff,#ebebeb);
    background: -ms-linear-gradient(top,#fff,#ebebeb);
    width: 540px;
    padding: 20px;
    float: right;
    margin: 20px;
    position: relative;
}
 
#loading {
    position: absolute;
    top: 10px;
    left: 50%;
}
 
nav[role="main"] {
 
}
 
nav[role="main"] ul li {
    float: left;
    padding: 10px;
}
 
nav[role="main"] ul li img {
    border: 1px solid #d4d4d4;
    background: #fff;
    padding: 4px;
}

Trong phần này mình cũng không làm CSS gì nhiều nên khi các bạn áp dụng vào trang web của mình thì style thêm nhé. Và bây giờ mình bắt đầu vào công việc chính nào.

Bước 3 – Load Data
Mã:
<?php
                            $db = mysqli_connect("localhost","root","","ajax_tab");
                            $query = "SELECT * FROM thumbnail";
                            $result = mysqli_query($db,$query);
                            $data = "";
                            while($row = mysqli_fetch_array($result)) {
                                $id = $row['id'];
                                $name = $row['name'];
                                $cat_id = $row['cat_id'];
                                $images = "images/".$row['images'];
                                $images = "<img src='$images' width='150' height='150'>";
                                $data .= "<li>$images</li>";
                            }
                            $data = "<nav role='main'><ul>"
                                     .$data."
                                     </ul></nav>";
                            echo $data;
                        ?>

Đoạn sau này mình không dùng hàm list() nữa là vì mình phải gán biến để lấy hình ra nhé.

Trong file data.php này nó chỉ làm nhiệm vụ là xuất tất cả bài viết trong database ra khi người dùng vào lần đầu tiên.

Trong database của mình có nhiều bài viết khi mình dùng vòng lặp while để xuất dữ liệu ra thì mình cần lưu tất cả nó vào biến $data để khi xuống dưới mình sẽ echo $data ra thì dữ liệu của mình sẽ trả về toàn bộ.

Nhắc lại bài cũ một chút xíu là ” .= ” có nghĩa là nối nhiều chuỗi vào cùng một biến nhé.

Bây giờ mình sẽ sử dụng Jquery AJAX để load dữ liệu này như sau:
Mã:
$(document).ready(function() {
    
    load_data();
    function load_data() {
        $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
        $.ajax({
            type: "POST",
            url: "data.php",
            success: function(data_log) {
                $('#loading').fadeOut('fast');
                $("#data").html(data_log);
            }
        })
    }
});

Mình sẽ viết một hàm load dữ liệu của file data.php và sau đó mình sẽ cho chạy hàm này, có nghĩa là khi trang web mình được tải xong thì dữ liệu của mình sẽ bắt đầu load xong. Hàm này mình chỉ dùng để tải dữ liệu nên sẽ không có truyền vào tham số gì nhé.

Bước 4 – Loading data khi được yêu cầu
Mã:
<?php
 
if(isset($_POST['id_cat']) && filter_var($_POST['id_cat'],
    FILTER_VALIDATE_INT, array('min_range'=>1))) {
    $db = mysqli_connect("localhost","root","","ajax_tab");
    $id_cat = mysqli_real_escape_string($db,trim($_POST['id_cat']));
    $get_data = "";
    $get_query = "SELECT * FROM thumbnail WHERE cat_id={$id_cat}";
    $get_result = mysqli_query($db,$get_query);
    while($rows = mysqli_fetch_array($get_result)) {
        $get_id = $rows['id'];
        $get_name = $rows['name'];
        $get_cat_id = $rows['cat_id'];
        $get_images = "images/".$rows['images'];
        $get_images = "<img src='$get_images' width='150' height='150'>";
        $get_data .= "<li>$get_images</li>";
    }
    $get_data = "<nav role='main'><ul>"
                    .$get_data."
                </ul></nav>";
    echo $get_data;
}
 
?>

Trong file get_data.php này mình sẽ thực hiện nhiệm vụ load dữ liệu khi người dùng click chọn danh mục bài viết.

Mình sẽ kiểm tra xem tham số id_cat mình truyền từ AJAX qua có tồn tại hay không, nếu có mình sẽ thực hiện lấy tham số này và SELECT database với điều kiện là id_cat mình vừa lấy được đồng thời phải VALIDATE cái input luôn nhé.

Hàm filter_var có nhiệm vụ lọc cái biến kiểu số nguyên và giá trị của nó phải lớn hơn 1 và không âm.

Sau đó mình dùng thêm mysqli_real_escape_string loại bỏ các ký tự đặc biệt và ký tự vớ vẫn để chống hack SQL Injection nữa nhé.

Nói thêm một chút xíu là CSDL của mình trong MYSQL các bạn nên chú ý cat_id chính là mối liên hệ giữa bảng categories và thumbnail trong CSDL nhé.

Trong video bên dưới sẽ nói rõ mối liên hệ giữa 2 bảng trong CSDL.

Bây giờ mình sử dụng Jquery AJAX để xử lý khi người dùng click chọn danh mục như sau:
Mã:
$("nav[role='tab'] ul li").click(function() {
            var id_cat = $(this).attr("id_cat");
            $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
            $("#main").slideUp().delay(400).slideDown();
            $.ajax({
                type: "POST",
                url: "get_data.php",
                data: "id_cat="+ id_cat,
                success: function(get_data) {
                    $('#loading').fadeOut('fast');
                    $("#data").empty().append(get_data);
                }
            });
        });

Mã:
var id_cat = $(this).attr("id_cat");
// $(this) có nghĩa là mình đang nói tới thẻ li được click
// Khi nó được click mình sẽ dùng hàm attr trong Jquery
// Để lấy tham số id_cat mà mình truyền cho thẻ li trong phần HTML

Sau đó mình sử dụng Jquery AJAX để load dữ liệu ra thôi. Bạn chú ý một xíu là khi trang web của mình được tải xong thì dữ toàn bộ dữ liệu trong MYSQL của mình cũng tải xong và nó được đổ vào thẻ div có id là data, bây giờ trước khi mình load dữ liệu mới cho thẻ div với id là data thì mình cần xóa hết dữ liệu cũ nó được tải lần trước đi.

Mình dùng hàm empty để xóa toàn bộ dữ liệu cũ đó đi và mình sẽ dùng tiếp hàm append để thêm dữ liệu mới mình vừa tải xong vào thẻ div với id là data.

Chúc các bạn thành công.


Nguồn: izwebz.com​
 

Đính kèm

  • ajax-loading.rar
    433.2 KB · Lượt xem: 13

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom