Site icon Bệ Phóng Việt

Dùng fetch() của Javascript để lấy thông tin từ server

jphopeblog
Advertisements

Trong bài này, chúng ta sẽ sử dụng backend PHP, front-end là Javascript thuần và HTML/CSS. Bạn sẽ lấy dữ liệu mà không cần phải reload lại trang web của mình.

Lấy dữ liệu với PHP

Để viết một hàm trong PHP để truy vấn cơ sở dữ liệu và trả về kết quả dưới dạng JSON, bạn có thể sử dụng các bước sau:

  1. Kết nối đến cơ sở dữ liệu bằng cách sử dụng hàm mysqli_connect() hoặc hàm PDO::__construct().
  2. Thực hiện truy vấn SQL bằng cách sử dụng hàm mysqli_query() hoặc hàm PDOStatement::execute().
  3. Lấy kết quả truy vấn bằng cách sử dụng hàm mysqli_fetch_assoc() hoặc hàm PDO Statement::fetch().
  4. Chuyển kết quả thành dạng JSON bằng cách sử dụng hàm json_encode().

Tạo file get_users.php với nội dung như dưới đây:

function get_users() {
    // Kết nối đến cơ sở dữ liệu
    $conn = mysqli_connect("localhost", "username", "password", "database");

    // Thực hiện truy vấn
    $result = mysqli_query($conn, "SELECT username, email FROM user");

    // Lấy kết quả
    $users = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $users[] = $row;
    }

    // Chuyển kết quả thành dạng JSON và trả về
    return json_encode($users);
}

Chú ý với ví dụ này, bạn cần có cơ sở dữ liệu bephong trong MySQL server của bạn, với bảng user như sau:

Tạo giao diện và lấy dữ liệu

Viết một trang HTML với button “Get Users” và hiển thị danh sách người dùng tìm được dưới dạng bảng HTML, bạn có thể sử dụng các bước sau:

  1. Tạo một button HTML với sự kiện onclick.
  2. Trong sự kiện onclick, sử dụng hàm fetch() để gọi đến hàm get_users() của PHP.
  3. Trong hàm then() của fetch(), sử dụng hàm json() để parse kết quả trả về từ hàm get_users() thành đối tượng JavaScript.
  4. Tạo một bảng HTML và hiển thị danh sách người dùng tìm được trong bảng.

File users.html sẽ có đoạn code tương tự như sau (chú ý đặt file html này cùng thư mục với get_users.php):

<button onclick="get_users()">Get Users</button> 
<table id="user-table"></table> 

<script> 
function get_users() { 
    fetch("get_users.php")
        .then(response => response.json())
        .then(users => { 
            // Lấy bảng
            var table = document.getElementById("user-table"); 
            // Xóa các dòng cũ trong bảng 
            table.innerHTML = ""; 
            // Thêm các dòng mới vào bảng. 
            for (var i = 0; i < users.length; i++) 
            { 
                var row = table.insertRow(-1); 
                var usernameCell = row.insertCell(0); 
                var emailCell = row.insertCell(1); 
                usernameCell.innerHTML = users[i].username; 
                emailCell.innerHTML = users[i].email; 
            } 
        }); 
} 
</script>

Bạn có thể đọc thêm về hàm fetch của Javascript tại đây.

Dùng Laravel làm backend

Bạn cũng có thể dùng Laravel để tạo action get_users và trả lại thông tin của user ở dạng json.

Để viết lại hàm get_users() của PHP bằng framework Laravel, bạn có thể sử dụng các bước sau:

  1. Tạo một model cho bảng user bằng cách sử dụng lệnh php artisan make:model User.
  2. Tạo một controller cho hàm get_users() bằng cách sử dụng lệnh php artisan make:controller UserController.
  3. Trong controller, viết hàm get_users() để truy vấn dữ liệu từ bảng users và trả về kết quả dưới dạng JSON.

Ví dụ:

<?php 
namespace App\Http\Controllers; 
use App\User; 
use Illuminate\Http\Request; 
class UserController extends Controller { 
  public function get_users() { 
    $users = User::select('username', 'email')->get(); 
    return response()->json($users); 
  }
}

Để sử dụng hàm fetch() để gọi đến hàm get_users() trong UserController bằng PHP, bạn có thể sử dụng các bước sau:

  1. Thêm một route cho hàm get_users() trong file routes/web.php.
  2. Trong hàm fetch(), truyền vào đường dẫn tới route của hàm get_users().
// routes/web.php 
Route::get('/get-users', 'UserController@get_users'); 

// JavaScript users.html
fetch("/get-users") 
  .then(response => response.json())
  .then(users => { // Xử lý kết quả như code ở mục trước });

Sử dụng Yii2

  1. Tạo một model cho bảng user bằng cách sử dụng lệnh php yii make:model User.
  2. Tạo một controller cho hàm action get_users() bằng cách sử dụng lệnh php yii make:controller UserController.
  3. Trong controller, viết hàm get_users() để truy vấn dữ liệu từ bảng user và trả về kết quả dưới dạng JSON.

Controller:

<?php 
namespace app\controllers; 
use yii\rest\ActiveController; 
class UserController extends ActiveController { 
  public $modelClass = 'app\models\User'; 
  public function actionGetUsers() {
    $users = $this->modelClass::find()->select(['username', 'email'])->asArray()->all(); 
    response()->json($users); 
  }
}
// config/web.php 
'rules' => [ 
  ... 
  ['class' => 'yii\rest\UrlRule', 'controller' => 'user'], 
]

Update cách gọi action GetUsers của Yii2 ở trong trang users.html như sau:

fetch('/users/get-users') 
  .then(response => response.json())
  .then(users => { 
    // do something with the users
  });

Kết luận

Trong bài này bạn đã học cách sử dụng fetch trong javascript. Bạn có thể áp dụng nó trong MVC web app. Tuy nhiên, nếu bạn cần xây dựng frontend javascript để tương tác với dữ liệu qua Web Service API, bạn nên xem xét việc dùng các framework như ReactJS hay VueJS.

Học cách sử dụng ReactJS trong series sau: ReactJS Bài 1: Khởi động dự án với reactjs

Exit mobile version