Sử dụng JSON với PHP trong JavaScript

Javascript nâng cao | 17/05/2025 by Học Javascript

Trong quá trình phát triển ứng dụng web, việc truyền và nhận dữ liệu giữa frontend (JavaScript) và backend (PHP) là một nhiệm vụ quan trọng. Một trong những định dạng dữ liệu phổ biến và hiệu quả nhất cho việc này chính là JSON (JavaScript Object Notation). Nhờ vào cấu trúc đơn giản, dễ đọc và tương thích cao với cả JavaScript lẫn PHP, JSON được sử dụng rộng rãi để trao đổi thông tin giữa client và server, đặc biệt trong các ứng dụng sử dụng AJAX hoặc API.

Bài viết này sẽ hướng dẫn chi tiết cách tạo, gửi và xử lý dữ liệu JSON giữa PHP và JavaScript, giúp bạn dễ dàng xây dựng những ứng dụng web linh hoạt, hiện đại và tối ưu hơn trong việc xử lý dữ liệu.

JSON là gì?

JSON (JavaScript Object Notation) là một định dạng dữ liệu dạng văn bản (text-based), dùng để biểu diễn các cấu trúc dữ liệu và đối tượng một cách đơn giản, dễ đọc và dễ phân tích. JSON được phát triển dựa trên cú pháp của JavaScript, nhưng lại được hỗ trợ rộng rãi trên hầu hết các ngôn ngữ lập trình hiện nay, bao gồm cả PHP.

Đặc điểm nổi bật của JSON:

Dễ đọc và dễ ghi cho con người.
Dễ phân tích và tạo lập bởi máy tính.
Nhẹ hơn so với XML khi truyền tải dữ liệu.
Phù hợp với nhiều loại ứng dụng web hiện đại.

JSON thường được dùng để làm gì?

Truyền dữ liệu giữa client và server:
Trong các ứng dụng web, khi người dùng gửi yêu cầu (request) lên server, dữ liệu có thể được trả về dưới dạng JSON để JavaScript xử lý.

Ứng dụng trong AJAX và API RESTful:
JSON là định dạng mặc định trong hầu hết các API hiện nay, đặc biệt là REST API. Thay vì tải lại toàn bộ trang, các ứng dụng SPA (Single Page Application) sử dụng AJAX để nhận dữ liệu JSON và cập nhật giao diện tức thì.

Tương thích tốt với JavaScript:
Vì JSON là một phần mở rộng của cú pháp object trong JavaScript, nên việc phân tích và thao tác với JSON trong trình duyệt rất dễ dàng, sử dụng các phương thức như JSON.parse() và JSON.stringify().

Ví dụ JSON đơn giản:

{
  "name": "Alice",
  "age": 25,
  "isStudent": false
}

JSON trên mô tả một đối tượng người dùng với ba thuộc tính: tên, tuổi và trạng thái sinh viên.

Tạo JSON trong PHP

Trong PHP, bạn có thể dễ dàng tạo chuỗi JSON từ mảng hoặc object bằng cách sử dụng hàm tích hợp sẵn json_encode(). Đây là một trong những cách phổ biến nhất để chuẩn bị dữ liệu JSON gửi đến frontend (JavaScript) trong các ứng dụng web hiện đại.

Sử dụng `json_encode()`

Hàm json_encode() có nhiệm vụ chuyển đổi mảng hoặc đối tượng PHP sang chuỗi JSON hợp lệ.

Cú pháp:

json_encode($value, $options = 0, $depth = 512)

$value: Dữ liệu PHP cần chuyển đổi (mảng, object, v.v.).
$options: Tùy chọn nâng cao như hiển thị đẹp, giữ nguyên Unicode, v.v.
$depth: Độ sâu tối đa của cấu trúc (mặc định là 512).

Ví dụ: Chuyển mảng kết hợp PHP thành JSON

<?php
$user = [
  "id" => 1,
  "name" => "Alice",
  "email" => "[email protected]"
];

$json = json_encode($user);
echo $json;
?>

Output:

{"id":1,"name":"Alice","email":"[email protected]"}

Lưu ý về UTF-8 và ký tự đặc biệt

json_encode() yêu cầu dữ liệu đầu vào phải được mã hóa UTF-8. Nếu không, hàm có thể trả về false.
Đối với các chuỗi có ký tự đặc biệt như tiếng Việt, bạn nên sử dụng tùy chọn JSON_UNESCAPED_UNICODE để giữ nguyên tiếng Việt thay vì mã hóa Unicode:

<?php
$data = [
  "message" => "Xin chào thế giới!"
];

echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>

Output:

{"message":"Xin chào thế giới!"}

Một số options hữu ích:

JSON_PRETTY_PRINT: Hiển thị chuỗi JSON có định dạng dễ đọc (thêm dòng mới, khoảng trắng).
JSON_UNESCAPED_UNICODE: Không mã hóa Unicode (hữu ích với tiếng Việt).
JSON_UNESCAPED_SLASHES: Không escape dấu /.

echo json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);

Truyền JSON từ PHP sang JavaScript

Trong các ứng dụng web, có hai cách phổ biến để truyền dữ liệu JSON từ PHP sang JavaScript:

Cách 1: Chèn trực tiếp JSON từ PHP vào JavaScript (inline)

Bạn có thể sử dụng json_encode() trong PHP để tạo chuỗi JSON và gán trực tiếp vào biến JavaScript trong mã HTML.

Ví dụ:

<?php
$user = [
  "id" => 1,
  "name" => "Alice",
  "email" => "[email protected]"
];
?>
<script>
  const user = <?php echo json_encode($user, JSON_UNESCAPED_UNICODE); ?>;
  console.log(user.name); // Output: Alice
</script>

Lưu ý: Đảm bảo json_encode() được gọi đúng cách để tạo ra chuỗi JSON hợp lệ. Cách này chỉ dùng được khi dữ liệu PHP có sẵn trong cùng trang HTML.

Cách 2: PHP xuất JSON để frontend gọi bằng `fetch()` hoặc `XMLHttpRequest`

Đây là cách tách biệt logic PHP (backend) và giao diện JavaScript (frontend). PHP sẽ xuất JSON khi được gọi, còn frontend sẽ gọi request tới PHP để lấy dữ liệu.

Ví dụ PHP (`data.php`):

<?php
header('Content-Type: application/json');

$data = [
  ["id" => 1, "name" => "Alice"],
  ["id" => 2, "name" => "Bob"]
];

echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>

Nhận dữ liệu JSON trong JavaScript

Sử dụng `JSON.parse()`

Khi bạn nhận được chuỗi JSON từ server (ví dụ qua fetch()), bạn có thể dùng JSON.parse() để chuyển đổi chuỗi đó thành đối tượng JavaScript.

const jsonString = '{"name":"Alice","age":30}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // Alice

Sử dụng `fetch()` để gọi PHP trả về JSON

Cách hiện đại, đơn giản và phổ biến nhất để gọi dữ liệu JSON từ PHP trong frontend hiện nay là dùng fetch().

Ví dụ cụ thể:

<script>
fetch('data.php')
  .then(response => response.json()) // Chuyển chuỗi JSON thành object
  .then(data => {
    data.forEach(user => {
      console.log(`${user.id} - ${user.name}`);
    });
  })
  .catch(error => console.error('Lỗi:', error));
</script>

Đây là cách lý tưởng khi bạn muốn lấy dữ liệu động (từ server) để hiển thị hoặc xử lý ở frontend.

Gửi JSON từ JavaScript sang PHP

Để gửi dữ liệu từ JavaScript sang PHP dưới dạng JSON, bạn cần:

Dùng fetch() hoặc XMLHttpRequest ở phía JavaScript.
Sử dụng Content-Type: application/json trong headers.
Chuyển object JavaScript thành chuỗi JSON bằng JSON.stringify().
Trong PHP, dùng file_get_contents('php://input') để lấy dữ liệu thô.
Dùng json_decode() để chuyển chuỗi JSON thành mảng hoặc object PHP.

Bước 1: JavaScript gửi dữ liệu

<script>
const user = {
  name: "Alice",
  email: "[email protected]"
};

fetch("receiver.php", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(user)
})
.then(response => response.text())
.then(data => console.log("Phản hồi từ server:", data))
.catch(error => console.error("Lỗi:", error));
</script>

Giải thích:

method: "POST": gửi dữ liệu bằng phương thức POST.
headers: thông báo cho server biết bạn đang gửi dữ liệu dạng JSON.
body: chứa dữ liệu JSON đã được stringify.

Bước 2: PHP nhận và xử lý JSON

Tạo file receiver.php để nhận và xử lý dữ liệu:

<?php
// Đọc nội dung JSON từ body request
$json = file_get_contents('php://input');

// Chuyển JSON thành mảng PHP
$data = json_decode($json, true);

// Kiểm tra và phản hồi
if ($data) {
    echo "Dữ liệu nhận được: Tên = " . $data['name'] . ", Email = " . $data['email'];
} else {
    echo "Không nhận được dữ liệu hợp lệ.";
}
?>

Giải thích:

file_get_contents('php://input'): đọc nội dung thô của request (thường dùng khi Content-Type là JSON).
json_decode($json, true): chuyển JSON thành mảng kết hợp PHP.

Kết quả mong đợi trên trình duyệt:

Phản hồi từ server: Dữ liệu nhận được: Tên = Alice, Email = [email protected]

Lưu ý:

Không dùng $_POST để lấy dữ liệu JSON kiểu này (vì PHP chỉ phân tích form data vào $_POST).
Đảm bảo chuỗi JSON hợp lệ và server đã bật php://input (mặc định luôn bật).

Ví dụ thực tế JSON trong JavaScript

Chúng ta sẽ tạo một ví dụ đơn giản để minh hoạ quá trình giao tiếp giữa JavaScript (client) và PHP (server) bằng JSON:

Người dùng nhập tên và tuổi vào form.
JavaScript thu thập dữ liệu, gửi đến PHP bằng fetch() dưới dạng JSON.
PHP xử lý dữ liệu và phản hồi lại một chuỗi JSON.
JavaScript nhận phản hồi và hiển thị kết quả lên giao diện.

Giao diện HTML + JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gửi JSON đến PHP</title>
</head>
<body>
  <h2>Nhập thông tin người dùng:</h2>
  <input type="text" id="name" placeholder="Tên">
  <input type="number" id="age" placeholder="Tuổi">
  <button onclick="sendData()">Gửi</button>

  <h3>Kết quả từ server:</h3>
  <pre id="result"></pre>

  <script>
    function sendData() {
      const user = {
        name: document.getElementById("name").value,
        age: parseInt(document.getElementById("age").value)
      };

      fetch("process.php", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(user)
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById("result").textContent = JSON.stringify(data, null, 2);
      })
      .catch(error => {
        document.getElementById("result").textContent = "Lỗi: " + error;
      });
    }
  </script>
</body>
</html>

File PHP (process.php)

<?php
// Nhận dữ liệu JSON từ phía client
$rawData = file_get_contents("php://input");
$data = json_decode($rawData, true);

// Kiểm tra dữ liệu
if (isset($data['name']) && isset($data['age'])) {
    $name = htmlspecialchars($data['name']);
    $age = intval($data['age']);

    // Phản hồi lại JSON
    $response = [
        "message" => "Chào $name!",
        "info" => "Bạn $age tuổi.",
        "status" => "success"
    ];
} else {
    $response = [
        "message" => "Dữ liệu không hợp lệ.",
        "status" => "error"
    ];
}

// Gửi header và phản hồi JSON
header("Content-Type: application/json; charset=utf-8");
echo json_encode($response);
?>

Kết quả khi người dùng nhập:

Tên: Trang
Tuổi: 22

Phản hồi từ PHP (hiển thị trong trình duyệt):

{
  "message": "Chào Trang!",
  "info": "Bạn 22 tuổi.",
  "status": "success"
}

Lưu ý khi dùng JSON với PHP và JavaScript

Gửi đúng `Content-Type`

Khi phản hồi dữ liệu JSON từ PHP, luôn dùng:

header("Content-Type: application/json");

Điều này giúp trình duyệt và các công cụ frontend nhận biết định dạng và xử lý đúng.

Kiểm tra lỗi `json_encode()` và `json_decode()`

Khi sử dụng json_encode():
- Dữ liệu phải là mảng hoặc object.
- Dữ liệu phải được mã hoá đúng (đặc biệt là UTF-8).

if (json_last_error() !== JSON_ERROR_NONE) {
    echo "Lỗi JSON: " . json_last_error_msg();
}

Tương tự, khi sử dụng json_decode(), hãy kiểm tra đầu vào hợp lệ và xử lý lỗi nếu cần.

Tránh ký tự đặc biệt gây lỗi

Ký tự không hợp lệ trong UTF-8, emoji, hoặc ký tự control (\0, \b,...) có thể gây lỗi khi encode/decode.
Đảm bảo chuỗi đầu vào đã được kiểm tra hoặc mã hoá đúng.

Đảm bảo đầu vào hợp lệ

Khi nhận dữ liệu từ fetch() ở phía frontend, nên kiểm tra kỹ:
- Kiểu dữ liệu (typeof)
- Trường bắt buộc (required fields)
- Tránh gửi undefined, function, hoặc các kiểu không hợp lệ với JSON.

Kết bài

JSON không chỉ là một định dạng dữ liệu đơn giản mà còn là cầu nối hiệu quả giữa JavaScript và PHP trong các ứng dụng web hiện đại. Việc hiểu và vận dụng thành thạo JSON giúp quá trình truyền tải dữ liệu giữa client và server trở nên nhanh chóng, dễ bảo trì và thân thiện với người dùng hơn.

Từ việc tạo JSON trong PHP, truyền đến JavaScript, cho đến gửi dữ liệu từ JavaScript về PHP và xử lý, bạn đã nắm được toàn bộ quy trình giao tiếp cơ bản giữa hai ngôn ngữ này. Đây là kỹ năng quan trọng trong phát triển các ứng dụng sử dụng AJAX, RESTful API, hay Single Page Application (SPA).

Hãy thực hành thường xuyên và kết hợp với các công cụ hỗ trợ như Postman, fetch, json_encode(), json_decode() để nâng cao hiệu quả và chuyên môn khi làm việc với JSON trong dự án thực tế.