เซิร์ฟเวอร์ JSON

สารบัญ

การใช้งาน JSON ทั่วไปคือการแลกเปลี่ยนข้อมูลไปยัง/จากเว็บเซิร์ฟเวอร์

เมื่อรับข้อมูลจากเว็บเซิร์ฟเวอร์ ข้อมูลจะเป็นสตริงเสมอ

แยกวิเคราะห์ข้อมูลด้วย JSON.parse() และข้อมูลจะกลายเป็นอ็อบเจ็กต์ JavaScript

การส่งข้อมูล

หากคุณมีข้อมูลที่จัดเก็บไว้ในออบเจ็กต์ JavaScript คุณสามารถแปลงออบเจ็กต์ได้ ลงใน JSON และส่งไปยังเซิร์ฟเวอร์:

ตัวอย่าง

 const myObj = {name: "John", 
  age: 31, city: "New York"};
const myJSON = 
  JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a JavaScript object into a JSON string, and send it to the server.</h2>

<script>
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>

</body>
</html>

การรับข้อมูล

หากคุณได้รับข้อมูลในรูปแบบ JSON คุณสามารถแปลงเป็น JavaScript ได้อย่างง่ายดาย วัตถุ:

ตัวอย่าง

 const myJSON =
  '{"name":"John", 
  "age":31, "city":"New York"}';
const myObj = 
  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a JSON string into a JavaScript object.</h2>

<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

JSON จากเซิร์ฟเวอร์

คุณสามารถขอ JSON จากเซิร์ฟเวอร์ได้โดยใช้คำขอ AJAX

ตราบใดที่การตอบกลับจากเซิร์ฟเวอร์เขียนในรูปแบบ JSON คุณก็สามารถทำได้ แยกสตริงลงในวัตถุ JavaScript

ตัวอย่าง

ใช้ XMLHttpRequest เพื่อรับข้อมูลจากเซิร์ฟเวอร์:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Fetch a JSON file with XMLHttpRequest</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", "json_demo.txt");
xmlhttp.send();
</script>

</body>
</html>

ดูที่ json_demo.txt: https://basicit.org/js/json_demo.txt

อาร์เรย์เป็น JSON

เมื่อใช้ JSON.parse() บน JSON ที่ได้มาจากอาร์เรย์ เมธอดจะ ส่งคืนอาร์เรย์ JavaScript แทนที่จะเป็นวัตถุ JavaScript

ตัวอย่าง

JSON ส่งคืนจากเซิร์ฟเวอร์เป็นอาร์เรย์:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myArr = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myArr[0];
  }
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p>Content written as an JSON array will be converted into a JavaScript array.</p>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myArr = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myArr[0];
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
</script>

</body>
</html>

ดูที่ json_demo_array.txt: https://basicit.org/js/json_demo_array.txt