Cách sử dụng phổ biến của JSON là đọc dữ liệu từ máy chủ web và hiển thị dữ liệu trong một trang web. Bài này sẽ hướng dẫn bạn cách trao đổi dữ liệu JSON giữa máy khách và máy chủ PHP.
Table of Contents
Tệp PHP
PHP có một số hàm tích hợp để xử lý JSON.
Các đối tượng trong PHP có thể được chuyển đổi thành JSON bằng cách sử dụng hàm PHP json_encode () :
Ví dụ ta có file Php như sau:
1 2 3 4 5 6 7 8 9 10 |
<?php $myObj = new stdClass(); $myObj->name = "John"; $myObj->age = 30; $myObj->city = "New York"; $myJSON = json_encode($myObj); echo $myJSON; ?> |
JavaScript của máy khách
Đây là một JavaScript trên máy khách, sử dụng lệnh gọi AJAX để yêu cầu tệp PHP từ ví dụ trên:
Ví dụ
Sử dụng JSON.parse () để chuyển đổi kết quả thành một đối tượng JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <h2>Get JSON Data from a PHP Server</h2> <p id="demo"></p> <script> const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { const myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } xmlhttp.open("GET", "demo_file.php"); xmlhttp.send(); </script> </body> </html> |
Kết quả:
Get JSON Data from a PHP Server
John
Mảng PHP
Mảng trong PHP cũng sẽ được chuyển đổi thành JSON khi sử dụng hàm PHP json_encode () :
1 2 3 4 5 6 7 |
<?php $myArr = array("John", "Mary", "Peter", "Sally"); $myJSON = json_encode($myArr); echo $myJSON; ?> |
JavaScript của máy khách
Đây là một JavaScript trên máy khách, sử dụng lệnh gọi AJAX để yêu cầu tệp PHP từ ví dụ mảng ở trên:
Thí dụ
Sử dụng JSON.parse () để chuyển đổi kết quả thành một mảng JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <h2>Get JSON Data from a PHP Server</h2> <p>Convert the data into a JavaScript array:</p> <p id="demo"></p> <script> const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { const myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj[2]; } xmlhttp.open("GET", "demo_file_array.php"); xmlhttp.send(); </script> </body> </html> |
Kết quả:
Get JSON Data from a PHP Server
Convert the data into a JavaScript array:
Peter
Cơ sở dữ liệu trong PHP
PHP là ngôn ngữ lập trình phía máy chủ và có thể được sử dụng để truy cập cơ sở dữ liệu.
Hãy tưởng tượng bạn có một cơ sở dữ liệu trên máy chủ của mình và bạn muốn gửi một yêu cầu đến nó từ máy khách, nơi bạn yêu cầu 10 hàng đầu tiên trong bảng được gọi là “khách hàng”.
Trên máy khách, tạo một đối tượng JSON mô tả số hàng bạn muốn trả về.
Trước khi bạn gửi yêu cầu đến máy chủ, hãy chuyển đổi đối tượng JSON thành một chuỗi và gửi nó dưới dạng tham số đến url của trang PHP:
Ví dụ
Sử dụng JSON.stringify () để chuyển đổi đối tượng JavaScript thành JSON:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <h2>Get JSON Data from a PHP Server</h2> <p>The JSON received from the PHP file:</p> <p id="demo"></p> <script> const dbParam = JSON.stringify({"limit":10}); const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { document.getElementById("demo").innerHTML = this.responseText; } xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam); xmlhttp.send(); </script> </body> </html> |
Kết quả:
Get JSON Data from a PHP Server
The JSON received from the PHP file:
[{“name”:”Alfreds Futterkiste”},{“name”:”Ana Trujillo Emparedados y helados”},{“name”:”Antonio Moreno Taqueria”},{“name”:”Around the Horn”},{“name”:”Berglunds snabbkop”},{“name”:”Blauer See Delikatessen”},{“name”:”Blondel pere et fils”},{“name”:”Bolido Comidas preparadas”},{“name”:”Bon app'”},{“name”:”Bottom-Dollar Marketse”}]
Ví dụ được giải thích:
- Xác định một đối tượng chứa một thuộc tính và giá trị “giới hạn”.
- Chuyển đổi đối tượng thành một chuỗi JSON.
- Gửi yêu cầu đến tệp PHP, với chuỗi JSON làm tham số.
- Chờ cho đến khi yêu cầu trả về kết quả (dưới dạng JSON)
- Hiển thị kết quả nhận được từ tệp PHP.
Hãy xem tệp PHP:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php header("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_GET["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $stmt = $conn->prepare("SELECT name FROM customers LIMIT ?"); $stmt->bind_param("s", $obj->limit); $stmt->execute(); $result = $stmt->get_result(); $outp = $result->fetch_all(MYSQLI_ASSOC); echo json_encode($outp); ?> |
Tệp PHP giải thích:
- Chuyển đổi yêu cầu thành một đối tượng, sử dụng hàm PHP json_decode () .
- Truy cập cơ sở dữ liệu và điền vào một mảng với dữ liệu được yêu cầu.
- Thêm mảng vào một đối tượng và trả về đối tượng dưới dạng JSON bằng cách sử dụng hàm json_encode ()
Sử dụng dữ liệu
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body> <h2>Get JSON Data from a PHP Server</h2> <p id="demo"></p> <script> const obj = { "limit":10 }; const dbParam = JSON.stringify(obj); const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { myObj = JSON.parse(this.responseText); let text = "" for (let x in myObj) { text += myObj[x].name + "<br>"; } document.getElementById("demo").innerHTML = text; }; xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam); xmlhttp.send(); </script> <p>Try changing the "limit" property from 10 to 5.</p> </body> </html> |
Kết quả:
Get JSON Data from a PHP Server
Alfreds Futterkiste
Ana Trujillo Emparedados y helados
Antonio Moreno Taqueria
Around the Horn
Berglunds snabbkop
Blauer See Delikatessen
Blondel pere et fils
Bolido Comidas preparadas
Bon app’
Bottom-Dollar MarketseTry changing the “limit” property from 10 to 5.
Phương pháp PHP = POST
Khi gửi dữ liệu đến máy chủ, cách tốt nhất là sử dụng POST
phương thức HTTP.
Để gửi các yêu cầu AJAX bằng POST
phương thức, hãy chỉ định phương thức và tiêu đề chính xác.
Dữ liệu được gửi đến máy chủ bây giờ phải là một đối số cho send()
phương thức:
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body> <h2>Use HTTP POST to Get JSON Data from a PHP Server</h2> <p id="demo"></p> <script> const dbParam = JSON.stringify({"limit":10}); const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { myObj = JSON.parse(this.responseText); let text = ""; for (let x in myObj) { text += myObj[x].name + "<br>"; } document.getElementById("demo").innerHTML = text; } xmlhttp.open("POST", "json_demo_db_post.php"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("x=" + dbParam); </script> <p>Try changing the "limit" property from 10 to 5.</p> </body> </html> |
Kết quả:
Use HTTP POST to Get JSON Data from a PHP Server
Alfreds Futterkiste
Ana Trujillo Emparedados y helados
Antonio Moreno Taqueria
Around the Horn
Berglunds snabbkop
Blauer See Delikatessen
Blondel pere et fils
Bolido Comidas preparadas
Bon app’
Bottom-Dollar MarketseTry changing the “limit” property from 10 to 5.
Sự khác biệt duy nhất trong tệp PHP là phương thức lấy dữ liệu được truyền.
Tệp PHP
Sử dụng $ _POST thay vì $ _GET:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php header("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_POST["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $stmt = $conn->prepare("SELECT name FROM customers LIMIT ?"); $stmt->bind_param("s", $obj->limit); $stmt->execute(); $result = $stmt->get_result(); $outp = $result->fetch_all(MYSQLI_ASSOC); echo json_encode($outp); ?> |