ว่าด้วยเรื่อง JSON

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

ว่าด้วยเรื่อง JSON

โพสต์โดย abdkode » 10/01/2019 3:38 pm

JSON หรือ Java Script Object Notation เป็นวิธีการที่ทำให้ JavaScript แลกเปลี่ยนข้อมูลกับ Server ได้อย่างง่ายดาย หรือเป็นไวยากรณ์สำหรับการจัดเก็บและการแลกเปลี่ยนข้อมูล รวมถึงเป็นทางเลือกใหม่ที่สามารถทดแทน XML ได้..

ตัวอย่าง JSON Arrays

โค้ด: เลือกทั้งหมด

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}


ซึ่งถ้าหากเราเขียนด้วย XML ก็จะเป็นประมาณนี้

โค้ด: เลือกทั้งหมด

<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>


เราจะเห็นได้ว่ามันแตกต่างกันชัดเจน ถ้าหากเขียนในรูปแบบ json อาจจะดูง่ายกว่าและไม่ค่อยรก แต่ถ้าหากว่า มีหลายๆข้อมูลและไม่จัดระเบียบให้ดีๆก็จะทำให้ตาลายเหมือนกัน

นอกจากนั้น อย่าพึ่งเข้าใจผิด JSON ไม่ใช่ programming language แต่เป็นข้อความหรือข้อมูลไว้สำหรับ แลกเปลี่ยนกันหรือติดต่อกับ server ได้ง่าย

ตัวอย่างการใช้งานผ่าน JavaScript

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<body>

<h2>JSON Object Creation in JavaScript</h2>

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

<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>

จะเห็นว่ามีการใช้ ฟังชั่น JSON.parse(); เพื่อวิเคราะห์แยกแยะข้อมูลเป็นส่วนๆกัน
ซึ่งแต่ละส่วนจะเก็บในตัวแปร obj.name, obj.street,obj.phone
ผลลัพธ์
json.jpg
json.jpg (15.16 KiB) เปิดดู 1478 ครั้ง


ปัจจุบันมี plugin หลายๆ ตัวมาใช้ JSON อยู่บ่อยๆ เพื่อง่ายในการวิเคราะห์ข้อมูลและรวดเร็ว และหวังว่าบทความนี้จะเป็นประโยช์น์ไม่มากก็น้อย

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ :Jquery & Ajax Knowledge
-การทำรูปภาพให้ซูมได้ด้วย Jquery
-การค้นหาข้อมูลโดยใช้ AJAX PHP

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน