Hướng dẫn dùng datajs JavaScript

Sử dụng ajax để hiện dữ liệu từ database hướng dẫn tạo request bằng javascript tới server để lấy dữ liệu về mà không cần nạp trang lại.

1. Giới thiệu kỹ thuật Ajax

• Ajax là kỹ thuật tạo request đển server mà không cần phải nạp lại trang.
• Web developer có thể thực hiện request đến server bằng nhiều cách: hàm fetch trong javascript hoặc dùng các thư viện như jquery, angularjs…cũng đều được.
• Kỹ thuật này giúp lập trình viên rất uyển chuyển trong việc xử lý nhiều vấn đề ở client mà cần đến dữ liệu hoặc hỗ trợ từ phía server. Ví dụ: check ngay username trong trang đăng ký thành viên, hiện lại captcha khác, nạp dữ liệu vào trang mà không làm reload trang
• Tham khảo thêm : video đăng ký thành viên trong kênh thầy long web
• Video này hướng dẫn bạn sử dụng ajax để lấy dữ liệu từ server về hiện trong trang web mà không cần nạp lại trang.

2. Chuẩn bị

Tạo database thaylongweb_tintuc và import dữ liệu. Tải database: thaylongweb_tintuc

3. Ứng dụng Ajax để hiện tin theo loại

Tạo trang tintrongloai.php để hiện danh sách tin

    
 
        
  
         Đăng:  - 
            Xem  
        
  
    

Tạo trang sử dụng ajax  với jquery

  

    Navbar
    
      
    
    

      

        

          Home
        
        

          Link
        
        

          Link
        
        

          Link
        
        

          Link
        
      
      
        
        Search
      
    
  




    
THẦY LONG WEB - DEMO AJAX
   

Kết quả xem trang như sau:

Thao tác với jquery

– Vào //developers.google.com/speed/libraries#jquery để lấy code jquery , sẽ thấy code jquery cần dùng để nhúng vào trang:

–  Nhúng code Jquery vào đầu trang web

– Code jquery gắn sự kiện click cho các tag a, xem

$[document].ready[function[]{
    $["a.nav-link"].click[ function[]{
    alert[this.href];
    return false;  
    }]
}]

– Code jquery: request và hiện kết quả

$[document].ready[function[]{
    $["a.nav-link"].click[ function[]{
        var url = this.href;
        $["main#kq"].load[url];
        return false;  
    }]
}]

Dữ liệu lúc này sẽ hiện trong trang, không qua trang mới, không nạp lại trang. Website chạy rất nhanh

Chú ý: Nếu không dùng jquery, code javascript thuần cũng được:

var navLinks = document.querySelectorAll['.nav-link'];
for[i=0; i response.text[]]
        .then[data => document.getElementById["kq"].innerHTML=data];
        return false;
    }
}

4. Ứng dụng ajax để hiện huyện theo tỉnh

Tạo 2 table trong database như sau:

Tạo file laytinh.php

Tạo file layhuyentrongtinh.php

Tạo file tinh-huyen.php

    Tỉnh
    
         Chọn tỉnh
    


    Huyện
    
         Chọn huyện
    


 
 

Code Ajax lấy tỉnh

$[document].ready[function[]{    
    $.ajax[{
        url: "//localhost/_hocPHP/laytinh.php",       
        dataType:'json',         
        success: function[data]{     
            $["#tinh"].html[""];
            for [i=0; i