PHP NÂNG CAO - Sử dụng ajax - trang web nhạc đơn giản phần 2

Tiếp theo phần một, chúng ta đã truyền id của ca sỹ sang PHP để truy vấn cơ sở dữ liệu để lấy ra thông tin và albums của các sỹ, sau đó từ PHP sẽ trả lại thông tin đã xử lý được lại cho javascript

Nếu ai chưa xem phần 1 thì có thể xem lại tại đây nhé

Tại trang process.php chúng ta sẽ lấy được ID của ca sỹ thông qua biến $_GET['id'], sau đó truy vấn với database để lấy ra thông tin của ca sỹ và các album thuộc ca sỹ đó

1 2 3 4 5 6

<?php     file process.php           $type = $_GET['type']; // cờ kiểm tra hành động     $singerid = $_GET['id']; // id của ca sỹ lấy được từ js ?>

Mở class singers lên, ta viết hàm getsinger() để lấy ra thông tin của ca sỹ, và hàm getalbums() để lấy ra các album của ca sỹ

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?php     file singers.php           protected $_table = "tbl_singers";     protected $_album = "tbl_albums";     public function getsinger($singerid){        $sql = "select * from $this->_table where singer_id = '$singerid'";        $this->query($sql);        return $this->fetch();      }          public function getalbums($singerid){        $sql = "select * from $this->_album where singer_id ='$singerid'";        $this->query($sql);        return $this->fetchAll();     } ?>

- Tại trang process ta gọi class singers ra và lấy đổ ra thông tin ca sỹ và đồng thời đổ ra các album thuộc ca sỹ này

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?php     file process.php           require("libraries/config.php");     require("libraries/database.php");     require("libraries/singers.php");          $type = $_GET['type']; // cờ kiểm tra hành động     $singerid = $_GET['id']; // id của ca sỹ lấy được từ js     $singers = new singers(); // sử dụng class singers     if($type == "singer"){ // lấy ra thông tin của ca sỹ              }elseif($type == "album"){ // lấy ra các bài hát của album              }else{ // chơi nhạc     } ?>

- Vì chúng ta có nhiều hàm xử lý đều gửi từ js sang file process.php nên nếu không sử dụng thuật toán thì khó có thể biết chúng ta đang cần xử lý thông tin gì, thông tin ca sỹ hay album hay là chơi nhạc, vì thế biến $type có chức năng như một cái cờ do ta định nghĩa ra để kiểm tra xem thông tin truyến từ js sang là gì 

1. Nếu là singer có nghĩa là ta đang cần lấy thông tin ca sỹ
2. Nếu là album có nghĩa là ta cần lấy các bài hát thuộc album này
3. Còn lại sẽ là để điều khiển play nhạc khi ta click vào một bài hát

- Tiếp tục, ta đổ ra thông tin ca sỹ và các album của ca sỹ này ra một vùng ID là "singers" tại trang index.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<?php     file process.php             $type = $_GET['type']; // cờ kiểm tra hành động     $singerid = $_GET['id']; // id của ca sỹ lấy được từ js     $singers = new singers(); // sử dụng class singers     if($type == "singer"){ // lấy ra thông tin của ca sỹ        $singerinfo = $singers->getsinger($singerid);        $listalbum = $singers->getalbums($singerid);          // bắt đầu đổ thông tin ca sỹ                 echo "<hr />";        echo "<div class='left'>";          echo "<h3>".$singerinfo['singer_name']."</h3>";          echo "<img src='images/$singerinfo[singer_image]' width='160' />";        echo "</div>";        echo "<div class='right'>";          echo "<p><strong>Thông tin</strong></p>";          echo "<p>".$singerinfo['singer_info']."</p>";        echo "</div>";          // Bắt đầu đổ ra thông tin các album          echo "<h3>Các albums của $singerinfo['singer_name']</h3>";        if($listalbum != NULL){ // ca sỹ này có album           echo "<ul>";           foreach($listalbum as $items){              echo "<li><a href='#'>".$items['album_title']."</a></li>";           }           echo "</ul>";        }else{ // ca sỹ chưa có album           echo "Hiện chưa có album nào";        }       } ?>

Khi ta echo thì kết quả nó tự động trả về cho js nhé ( trả về cho hàm processsinger()  mà ta khai báo ở htt.onreadystatechange = processsinger trong hàm singers() của file ajax.js)

Tại hàm processinger() nhận kết quả trả về bằng hàm http.responseText , sau đó ta đổ ra <div id="singers"></div> bằng cú pháp document.getElementById("singers"). innerHTML = http.responseText

Và đây là kết quả



Như vậy là chúng ta đã lấy được thông tin ca sỹ và các album của ca sỹ, giờ chúng ta cần làm thế nào để khi click vào tên album thì sẽ đổ ra danh sách các bài hát thuộc album này?

Ta cân viết một hàm albums() để lấy ra các bài hát thuộc album, tại tên album ta viết sự kiện onclick = "albums(id album)" để lấy ra danh sách các bài hát

1 2 3

<?php     <a href="#" onclick="albums(albumid)">tên album</a> ?>

- Viết hàm albums, mở file ajax.js

1 2 3 4 5 6 7

File ajax.js   function albums(albumid){     http.open("GET","process.php?type=album&id="+albumid);     http.onreadystatechange = responsealbum;     http.send(null);             }

Hàm albums này chúng ta đang truyền vào albumid được lấy khi click chuột vào tên album nhé, tương tự như phần lấy thông tin ca sỹ thui, biến $type = album để truyền sang file process.php với mục đích thông báo cho ta biết là hành động này ta cần lấy ra các bài hát thuộc album.

Kết quả trả sau khi được xử lý trả về cho hàm responsealbum() nhé chứ không phải responsesinger() nữa vì ta đang khai báo ở http.onreadystatechange = responsealbum mà :P
nguồn http://phpandmysql.net/