JSON PHP

JSON 的常规用途是从 web 服务器读取数据，然后在网页中显示这些数据。

本章向您讲解如何在客户端与 PHP 服务器之间交换 JSON 数据。

ไฟล์ PHP

PHP 提供处理 JSON 的内建函数。

通过使用 PHP 函数 json_encode()，PHP 中的对象可转换为 JSON：

ไฟล์ PHP

<?php
$myObj->name = "Bill Gates";
$myObj->age = 62;
$myObj->city = "Seattle";
$myJSON = json_encode($myObj);
echo $myJSON;
?>

แสดงไฟล์ PHP

JavaScript บนคลายงาน

นี่คือ JavaScript บนคลายงาน ที่ใช้ AJAX โปรแกรมเรียกเรียน PHP ไฟล์ในตัวอย่างข้างต้น:

ตัวอย่าง

ใช้ JSON.parse() แปลงผลลัพธ์เป็น JavaScript Object:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
         myObj = JSON.parse(this.responseText);
         document.getElementById("demo").innerHTML = myObj.name;
     });
});
xmlhttp.open("GET", "demo_file.php", true);
xmlhttp.send();

ทดลองด้วยตัวเอง

PHP Array

ในการใช้ฟังก์ชัน json_encode() ในขณะนี้ ตัวแปร Array ใน PHP จะถูกแปลงเป็น JSON ด้วย:

ไฟล์ PHP

<?php
$myArr = array("Bill Gates", "Steve Jobs", "Elon Musk");
$myJSON = json_encode($myArr);
echo $myJSON;
?>

แสดงไฟล์ PHP

JavaScript บนคลายงาน

นี่คือ JavaScript บนคลายงาน ที่ใช้ AJAX โปรแกรมเรียกเรียน PHP ไฟล์ในตัวอย่างข้างต้น:

ตัวอย่าง

ใช้ JSON.parse() แปลงผลลัพธ์เป็น JavaScript Array:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
         myObj = JSON.parse(this.responseText);
         document.getElementById("demo").innerHTML = myObj[2];
     });
});
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

ทดลองด้วยตัวเอง

PHP Database

PHP คือภาษาเขียนโปรแกรมที่ใช้บนเซิร์ฟเวอร์ ควรใช้สำหรับการกระทำที่เซิร์ฟเวอร์ควรทำเพียงเดียว อย่างเช่น การเข้าถึงฐานข้อมูล

จินตนาการว่าบนเซิร์ฟเวอร์มีฐานข้อมูลที่มีข้อมูลลูกค้า สินค้า และผู้จำหน่าย

ขณะนี้คุณต้องขอให้เซิร์ฟเวอร์เพื่อรับสิบบันทึกแรกในตาราง "ลูกค้า":

ตัวอย่าง

ใช้ JSON.stringify() แปลง JavaScript Object ให้เป็น JSON:

obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
    });
});
xmlhttp.open("GET", "demo_json_db.php?x=" + dbParam, true);
xmlhttp.send();

ทดลองด้วยตัวเอง

ตัวอย่างที่แสดง

  • กำหนดวัตถุที่มีคุณสมบัติ table และ limit。
  • แปลงองค์ประกอบนี้เป็นตัวเลข JSON
  • ส่งคำขอไปยังไฟล์ PHP นี้ โดยใช้ JSON ในตัวแปร
  • รอจนกว่าคำขอจะกลับมา (ในรูปแบบ JSON)
  • แสดงผลลัพธ์ที่ได้รับจากไฟล์ PHP

ตรวจสอบไฟล์ PHP

ไฟล์ PHP

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =  json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>

ชื่อไฟล์ PHP นี้

  • แปลงคำขอเป็นองค์ประกอบ ด้วยฟังก์ชัน PHP json_decode().
  • สืบหาฐานข้อมูล โดยใช้ข้อมูลที่ขอ
  • เพิ่มตัวแปรเข้าสู่องค์ประกอบ ด้วย json_encode() ฟังก์ชันส่งกลับเป็นองค์ประกอบ。

เลื่อนผลลัพธ์

แปลงผลลัพธ์ที่ได้รับจากไฟล์ PHP ให้เป็นองค์ประกอบ JavaScript หรือ JavaScript แบบตัวเลขในตัวอย่างนี้：

ตัวอย่าง

ใช้ JSON.parse() แปลง JSON ให้เป็นองค์ประกอบ JavaScript：

...
xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
         myObj = JSON.parse(this.responseText);
         for (x in myObj) {
             txt += myObj[x].name + "<br>";
        });
         document.getElementById("demo").innerHTML = txt;
    });
});
 ...

ทดลองด้วยตัวเอง

วิธี PHP = POST

ในการส่งข้อมูลไปยังเซิร์ฟเวอร์ มันถูกต้องที่จะใช้วิธี HTTP POST。

หากต้องการใช้วิธี POST ในการส่งคำขอ AJAX ให้ระบุวิธีนี้และหัวขอที่ถูกต้อง。

ข้อมูลที่ส่งไปยังเซิร์ฟเวอร์ต้องเป็น .send(); ตัวแปรของหน้าต่างความคิด

ตัวอย่าง

obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
         myObj = JSON.parse(this.responseText);
         for (x in myObj) {
             txt += myObj[x].name + "<br>";
        });
         document.getElementById("demo").innerHTML = txt;
    });
});
xmlhttp.open("POST", "demo_json_db.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

ทดลองด้วยตัวเอง

ไฟล์ PHP ที่แตกต่างกันเพียงเดียวคือวิธีที่ใช้รับข้อมูลที่ถูกส่ง

ไฟล์ PHP

ใช้ $_POST แทน $_GET：

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =  json_decode($_POST["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>