Hướng Dẫn - Jquery AJAX Tải Dữ Liệu Khi được Yêu Cầu - VNXF

Trang chủ » Truyền Dữ Liệu Vào Ajax » Hướng Dẫn - Jquery AJAX Tải Dữ Liệu Khi được Yêu Cầu - VNXF

Có thể bạn quan tâm

Cộng đồng người dùng XenForo tại Việt Nam
  • Trang chủ
  • Diễn đàn Bài viết mới Tìm chủ đề
  • Dịch Vụ XenForo
  • Tài nguyên Trả phí
  • Chia sẻ Miễn phí Addons miễn phí Styles miễn phí Các bước dựng XenForo
Vietnamese Arabic Chinese English French German Hindi Indonesian Italian Japanese Khmer Korean Lao Portuguese Spanish Thai Vietnamese Đăng nhập

Tìm kiếm

Everywhere Chủ đề This forum This thread Chỉ tìm trong tiêu đề Note Bởi: Tìm Tìm kiếm nâng cao…
  • Bài viết mới
  • Tìm chủ đề
Menu Đăng nhập Đăng ký Install the app Cài đặt How to install the app on iOS

Follow along with the video below to see how to install our site as a web app on your home screen.

Note: This feature may not be available in some browsers.

  • ✨ [VNXF] Core - Addon tối ưu XenForo & nền tảng cho hệ sinh thái addon của VNXF
  • Diễn đàn
  • CSS - HTML - Javascript
  • JavaScript/jQuery
You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser. Hướng dẫnJquery AJAX tải dữ liệu khi được yêu cầu
  • Thread starter Thread starter PVS
  • Ngày gửi Ngày gửi 07/04/2017
  • Từ khóa Từ khóa ajax data dử liệu jquery lap trinh ngon ngu vnxf vnxf.vn website xenforo
[VNXF] Theme Digital – Sự lựa chọn hoàn hảo cho diễn đàn công nghệ hiện đại Group Zalo của Cộng đồng người dùng XenForo tại Việt Nam PVS

PVS

Super Moderator
Thành viên BQT 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. To view this content we will need your consent to set third party cookies. For more detailed information, see our cookies page. Accept third party cookies ​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​ Bài viết liên quan Tại sao giao diện Google Cloud tải chậm? Tại sao giao diện Google Cloud tải chậm? bởi Nhật Quang, 06/11/2025 Kiến trúc front-end hiệu năng cao cho ứng dụng web Kiến trúc front-end hiệu năng cao cho ứng dụng web bởi Nhật Quang, 06/11/2025 Làm cách nào required upload ảnh khi đăng bài lên blog Làm cách nào required upload ảnh khi đăng bài lên blog bởi Phucphuc, 13/07/2024 Tôi muốn dùng ảnh bài viết làm ảnh bìa blog Sngine Tôi muốn dùng ảnh bài viết làm ảnh bìa blog Sngine bởi nguyenlongvn, 30/06/2024 Sử dụng Console của Chrome hoặc Firefox Sử dụng Console của Chrome hoặc Firefox bởi 70211119, 24/11/2021 Hỏi về cách lấy id trong jquery Hỏi về cách lấy id trong jquery bởi logitech, 24/12/2020 3,825 0 0 Bạn phải đăng nhập hoặc đăng ký để bình luận. Chia sẻ: Facebook Bluesky LinkedIn Reddit Pinterest Tumblr WhatsApp Email Chia sẻ Link

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS
Group Telegram của Cộng đồng người dùng XenForo tại Việt Nam [VNXF] Theme Digital – Sự lựa chọn hoàn hảo cho diễn đàn công nghệ hiện đại [VNXF 2x] Best Statistics Pro – Thống kê nâng cao, tối ưu hiệu năng cho XenForo 1.1 Bảng giá dịch vụ thiết kế, làm diễn đàn XenForo năm 2024

Xử lý sự cố

  • Làm gì khi tài khoản chủ web bị khóa do đăng nhập sai nhiều lần
  • Cách đổi mật khẩu Admin XenForo bằng PhpMyAdmin
  • Redirect tên miền trên CloudFlare để giữ từ khóa trên Google

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

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Textlink

Khám phá AI cùng người Việt Diễn đàn chia sẻ kinh nghiệm massage Review dịch vụ massage toàn quốc Cộng Đồng Massage Việt Nam Cộng đồng AI Việt Nam Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian Mút Sofa Không Gian
  • Diễn đàn
  • CSS - HTML - Javascript
  • JavaScript/jQuery

  • Chúng tôi tôn trọng quyền riêng tư của bạn.

    Chúng tôi sử dụng cookie thiết yếu để trang web này hoạt động và cookie tùy chọn để nâng cao trải nghiệm của bạn.

    Xem thêm thông tin và tùy chỉnh tùy chọn của bạn

    Chấp nhận tất cả cookie Từ chối cookie tùy chọn
    • Cookie thiết yếu
    Các cookie này cần thiết để kích hoạt các chức năng cốt lõi như bảo mật, quản lý mạng và khả năng truy cập. Bạn không thể từ chối chúng.
    • Cookie tùy chọn
    Chúng tôi cung cấp các chức năng nâng cao cho trải nghiệm duyệt web của bạn bằng cách thiết lập các cookie này. Nếu bạn từ chối chúng, các chức năng nâng cao sẽ không khả dụng.
    • Cookie của bên thứ ba
    Cookie do bên thứ ba thiết lập có thể cần thiết để vận hành các chức năng phối hợp với nhiều nhà cung cấp dịch vụ khác nhau nhằm mục đích bảo mật, phân tích, hiệu suất hoặc quảng cáo.
    • Sử dụng cookie chi tiết
    • Chính sách bảo mật
    Lưu tùy chọn cookie
Back Top

Từ khóa » Truyền Dữ Liệu Vào Ajax